Thread: CSS HElp
View Single Post
Re: CSS HElp
Old
  (#7 (permalink))
EnZo
Platinum Member
EnZo is on a distinguished road
 
Status: Offline
Posts: 987
Points: 50.1
Bank: 41,660.9
Total Points: 41,711.0
Donate
Join Date: Aug 2007
Location: Romania
Rep Power: 2
Re: CSS HElp - 07-16-2008, 11:48 AM

ok, managed to fix it. The problem was with your text formatting. You shouldn't add text formats to the navigation/header/content/footer div tags. (you had those with line-height, font-size etc. in the css style IDs of these tags when you shouldn't have had them in the 1st place).

The fix consists in removing those lines and adding classes for each of the elements that use text formatting. (in this case you can notice I added the "#content p" ID at the end of the css file, to format the text in the #content div.
Furthermore I then customized the .style3 class located in the #navigation div which was causing the layout drop in FF3 (Firefox3).

What I recommend is creating the main divs, and afterwards if you want to customize the text or content located in these divs, use customized CSS classes for each of these elements, as in my example when I added the .style3 class at the beginning of the css file/code you provided, to format the navigation text without making visual changes to the whole layout as in the 1st place.

Also you should know that this was only seen in Firefox3(or lower). In IE it displayed correctly because IE parses the classes/divs/styles located in the page differently than the Gecko engine that Firefox uses.

If you have any other questions feel free to ask!

copy/paste this code or study it to see what I've modified.
HTML Code:
@charset "utf-8";

.style3 { 
    font-size:15px;
    margin: 0;
}

#wrap{
    width:801px;
    margin: 0 auto;
    }

#header{
    height:138px;
    width:801px:;
     background-color: red;
    margin: 0;
}
#navigation{
    background-repeat:no-repeat;
    height:43px;
    color:#000001;
    width:801px;
    margin: 0;
}
#content{
    background-image:url(images/content.gif);
    background-repeat:repeat-y;
    width:801px;
    margin: 0;

}
#footer{
    background-image:url(images/footer.jpg);
    background-repeat:no-repeat;
    height:87px;
    text-align:center;
    width:801px;
    }
    
#content p {
    margin: 0;
}
[lateredit]

I may have displaced some of the paths to your background images and such, but I'm sure u can add those back with ease.


Quote:
Vacation mode: [On] - this means that I'm currently not doing any work so don't even bother contacting me. Basically now I'm just a lazy bastard that likes to post only to earn the easy 5ddp/thread. :D

A mans dreams are an index to his greatness.


http://www.phantomsoftware.org/ - Need a site? We're the ones you're looking for!


Last edited by EnZo : 07-16-2008 at 11:52 AM. Reason: ops!
   
Reply With Quote