FRIHOST FORUMS SEARCH FAQ TOS BLOGS COMPETITIONS
You are invited to Log in or Register a free Frihost Account!


help with IE/FF (i dont care which),but I need some pointers





Bump_on_a_Log08
The sites in question can be found at http://www.bumponalogworld.frih.net/index.html and http://www.bumponalogworld.frih.net/homework/index.htm.
The CSS files are located at http://www.bumponalogworld.frih.net/bumponalogworld.css and http://www.bumponalogworld.frih.net/homework/HTML_Project.css.

1. How do I get my CSS formatting to work with FF?

2. How do I get my link buttons to keep from shifting a few pixels when the pic changes?

3. I need content!!!! You dont actually have to do anything about that, Im just venting.

Please help, I consider my self pretty new at webpage design, I havent even taken the class at my high school, I am taking Computer Programming, though. We're having an HTML unit. Thats why I decided to post my homework page, too.
{name here}
1. Remember everything is case sensitive on the web.
2. I never had this problem, so I can't tell you how to fix it.

Your site layout frankly was better before with the dark design. Frames have been a scourge since they came out in the 90s in HTML 3(or 2. I can't remember).
Bump_on_a_Log08
I figured out the FF/CSS compatibility issue.
I didnt know that you were supposed to put each part of code on a separate line for it to work with firefox.
Dragate
You don't have to.

It's just different style of writting, some servers just don't support it.

also, becuase of the different support styles for CSS, always include full codes to the maximum standards.

Always put <style> tags at the begnining of your css files, and try to in your <link rel="stylesheet" type="text/css" href="bumponalogworld.css" /> tag inside the head of the document put in the full URL, beucase for stupid reasons, and server malfuntions actually it sometimes just doesn't work.

Well have fun, I'm glad you got it to work! good for you. It can get really stressful sometimes to fix it.
Bump_on_a_Log08
I'm working on a completely revamped version of my website.

But I'm having trouble with the right and bottom sides of my divs.
There is too much space between the containers right and bottom borders and the other divs contained inside.

Here's the code:


Code:
/* My Website CSS */

body {
   background-color: #fffff8;
   font-size: small;
   }
   
div.header {
         background-color: #9BD1FA;
         padding: 15px;
         /*border-style: solid;
         border-color: #000000;
         border-width: 5px;*/
         }

div.navigation {
            background-color: #555555;
            padding: 15px 15px;
            float: left;
            width: 10%;
            /*position: absolute;
            left: 10px;*/
            height: 75%;
            border-right-style: solid;
            border-right-color: #000000;
            border-right-width: 5px;
            border-top-style: solid;
            border-top-color: #000000;
            border-top-width: 5px;
            }

div.body {
      background-color:ffbb88;
      padding: 15px 15px;
      text-indent: 15px;
      /*float: right;*/
      width: 96%;
      /*position: absolute;
      left: 10%;*/
      height: 75%;
      /*border-right-style: solid;
      border-right-color: #000000;
      border-right-width: 5px;*/
      border-top-style: solid;
      border-top-color: #000000;
      border-top-width: 5px;
      }

div.content {
         width: 97%;
         height: 100%;
         background-color: #000000;
         border-style: solid;
         border-color: #000000;
         border-width: 5px;
         }

/* End of File */
Bump_on_a_Log08
I found a makeshift way of fixing it.

I got rid of the width restriction of the div.body and put a hr in it.
MrBlueSky
Typo:

Quote:

background-color:#ffbb88;


Smile
Bump_on_a_Log08
i have slightly modified my css code now, it works better but not perfectly.

Code:
/* My Website CSS */

body {
   background-color: #000000;
   font-size: small;
   }
   
div.header {
         background-color: #9BD1FA;
         padding: 15px;
         border-style: solid;
         border-color: #000000;
         border-width: 5px;
         }

div.navigation {
            background-color: #888888;
            padding: 15px 15px;
            float: left;
            width: 10%;
            /*position: absolute;
            left: 10px;*/
            height: 100%;
            border-style: solid;
            border-color: #000000;
            border-width: 5px;
            }

div.body {
      background-color: #ffbb88;
      padding: 15px 15px;
      text-indent: 15px;
      /*float: right;*/
      /*width: 96%;*/
      /*position: absolute;
      left: 10%;*/
      height: 100%;
      /*border-right-style: solid;
      border-right-color: #000000;
      border-right-width: 5px;*/
      border-style: solid;
      border-color: #000000;
      border-width: 5px;
      }

div.body#pics {
         height: 1500px;
         }

div.navigation#pics {
               height: 1500px;
               }

div.content {
         width: 97%;
         height: auto;
         /*background-color: #000000;*/
         /*border-style: solid;
         border-color: #000000;
         border-width: 5px;*/
         }

table {
   text-align: center;
   }

td.pics {
      text-align: center;
      width: 450px;
      }

a {
   color: #9bd1fa;
   }

a:visited {
         color: #ffbb88;
         }

/* End of File */
riv_
Looks like you've been working hard!
Sorry to come in and comment so late in the game.
I just read through your thread, and it sounds like you've had some problems with extra spaces.
Your browsers all set default margins and padding for various elements - and each browser sets a different amount.
It might be a good idea to add margin: 0; padding: 0; to your body style at the beginning of your css.
That gives all of your divs a default margin and padding of 0. You can still override this if you want to.
You may not need it, it looks pretty good. But maybe it will help, I don't know!
Bump_on_a_Log08
Okay I've done that, but on IE there is still space between my navigation div and my body div. In IE my navigation div is not matching my body div's vertical size. That is probably because I do not have the proper code in my CSS. Any help would be much appreciated.

Here is my most up-to-date version of the CSS File:

Code:
/* My Website CSS   V:0.1*/

body {
   padding: 0;
   margin: 0;
   background-color: #ffffff;
   font-size: small;
   }

div.header {
         margin: 0;
         /*background-color: #9BD1FA;*/
         background-color: #eeaa77;
         padding: 15px;
         border-style: solid;
         border-color: #000000;
         border-width: 5px;
         }

p.validator {
         float: right
         }

div.navigation {
            margin: 0;
            background-color: #888888;
            padding: 15px 15px;
            float: left;
            width: 10%;
            /*position: absolute;
            left: 10px;*/
            height: 100%;
            border-style: solid;
            border-color: #000000;
            border-width: 5px;
            }

div.body {
      margin: 0;
      /*background-color: #ffbb88;*/
      background-color: #ff8822;
      padding: 15px 15px;
      text-indent: 15px;
      /*float: right;*/
      /*width: 96%;*/
      /*position: absolute;
      left: 10%;*/
      height: 100%;
      /*border-right-style: solid;
      border-right-color: #000000;
      border-right-width: 5px;*/
      border-style: solid;
      border-color: #000000;
      border-width: 5px;
      }

div.pics {
      height: 1500px;
      }

div.content {
         margin: 0;
         padding: 0;
         width: 97%;
         height: auto;
         /*background-color: #000000;*/
         /*border-style: solid;
         border-color: #000000;
         border-width: 5px;*/
         }

table {
   text-align: center;
   }

td.pics {
      text-align: center;
      width: 450px;
      }

a {
   color: #9bd1fa;
   }

a:visited {
         color: #ffbb88;
         }

a:hover {
      background-color: #444444;
      }

/* End of File */
littlegiant
Uhhh... just for the record, how HTML and CSS is parsed is entirely a browser issue, not a server issue. Servers don't parse HTML or CSS. They just serve it up exactly the way it was written. HTML and CSS coding gets parsed entirely on the client side by web browsers.
Bump_on_a_Log08
i know that already, i just need help getting it to format correctly first on the browsers. Anyways, my website that I am working on now that uses this CSS is not on a server yet, its on my computer.
littlegiant
Yeah sorry, Bump_on_a_Log08.. I should have specified that I was referring to Dragate's reply...
Bump_on_a_Log08
hey I have a new topic called "I would like some feedback about the layout of my site" in the "Design Tips" Forum.
Donutey
Just as a general tip, I've found it works better to design for FireFox or another with another browser with a relatively "normal" CSS implementation and then fix the problems with IE (validating as a go with the W3C).
Azmo
gaaah... here's the code u need..

Code:
overflow:hidden;


that solves ur problem.. if you have a space between ur <div1> and ur <div2> and margin:0px; padding:0px; don't do the job for you.. ad overflow:hidden; to the dig that's highest.. if <div1> is ur site head.. and <div2> is ur navigation.. ad overflow:hidden; to ur <div1>
Related topics
Reply to topic    Frihost Forum Index -> Webmaster and Internet -> Design Tips

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2011 Frihost, forums powered by phpBB.