6 {{ upvoteCount | shortNum }}
6 {{ upvoteCount | shortNum }}

I Need Some Css Div Help.........

by Steve Wells
5 replies
  • WEB DESIGN
    • |
**********FIXED********

I am currently working on a website for a client

I have viewed this website in IE, Chrome, Opera, Safari and Firefox.....

On my PC everything seems to be fine but when I view the website on my MacBook Pro, via Firefox, the text in the main content left hand side area, seems to bleed into the footer graphic area...

I'm a bit eye sore right now and may be missing something, if you have a solution please let me know? I am using 4.01 strict html coding...

I just noticed that if I zoom in on firefox, the text us enlarged for some reason, which I believe is a firefox issue?

Anyone have a fix for this?
#css #div
  • Profile picture of the author Daverz
    The problem appears to be due to the way that Firefox renders fonts. It's making the text slightly bigger, which is causing it to extend slightly into the footer.

    You have multiple solutions here: decrease the text size or line height, increase the main div height, or remove the height from the main div/containers and have them be fluid.
    {{ DiscussionBoard.errors[4805513].message }}
    • Profile picture of the author Steve Wells
      Originally Posted by Daverz View Post

      The problem appears to be due to the way that Firefox renders fonts. It's making the text slightly bigger, which is causing it to extend slightly into the footer.

      You have multiple solutions here: decrease the text size or line height, increase the main div height, or remove the height from the main div/containers and have them be fluid.
      Daverz, I tried everything you said and none of it seemed to work. I notice that when I zoom in on firefox, firefox seems to enlarge all the font sizes? And the contents of the site seem to be escaping their divs?

      This is confusing, it makes no sense......?
      Signature
      Need Custom Graphics Work? - Message Me For A Design Quote!
      {{ DiscussionBoard.errors[4805811].message }}
  • Profile picture of the author andrejvasso
    As Daverz already said, if you remove the fixed height properties from your main divs and containers, it will work (I have just tired it myself and it works). You can still keep the 622px as min-height property if you need to.
    {{ DiscussionBoard.errors[4805842].message }}
    • Profile picture of the author Steve Wells
      Originally Posted by andrejvasso View Post

      As Daverz already said, if you remove the fixed height properties from your main divs and containers, it will work (I have just tired it myself and it works). You can still keep the 622px as min-height property if you need to.
      Would it be possible to show me what you changed in the css to get this to work. I dont seem to be following precisely what you are saying to do............. sorry...
      Signature
      Need Custom Graphics Work? - Message Me For A Design Quote!
      {{ DiscussionBoard.errors[4806018].message }}
  • Profile picture of the author andrejvasso
    Well, you have got various divs with the height of 622px. For instance:


    Code:
    #wrap #main #left_container {
    background-color: #FFFFFF;
    float: left;
    height: 622px;
    padding-left: 25px;
    padding-right: 25px;
    width: 650px;
}
    Try changing it to:

    Code:
    #wrap #main #left_container {
    background-color: #FFFFFF;
    float: left;
    height: auto;
    padding-left: 25px;
    padding-right: 25px;
    width: 650px;
}
    You probably have to go through the whole css to find all other elements where you applied the fixed height attribute and change it to "auto".

    Not sure if this will completely solve your problem, but at least i cant reproduce the error once i applied these changes.
    {{ DiscussionBoard.errors[4806090].message }}

Trending Topics