SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2005
    Location
    USA
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Newbie: Safari/Firefox display off

    Hi, all,

    Unlike most people here, my pages look just fine in IE but the alignment is off in Safari, Firefox, etc. I'm doing the website for my employer and have to use Frontpage to do it (company property & software). I expect that FP plays nice with IE, but doesn't get along with other browsers.

    Anyway, at this page http://www.wacoclassic.com the center section overlaps the navigation on the left.

    I'm new at CSS. I figure it's probably something to do with margins, but since I'm still learning I haven't been able to figure it out.

    Any ideas?

    Thank you!

  2. #2
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    So what happens if you changed this
    Code:
    .content {
    	line-height: 1.5em;
    	margin: 30px 20px 10px 5px;
            etc...
    to this
    Code:
    .content {
    	line-height: 1.5em;
    	margin: 30px 20px 10px 170px;  
            etc...
    ?
    If the width of your float is 168px (I think, bad short-term memory), and I didn't look for padding but add that too, then the content at the side needs to be pushed that amount of space away from the float. The float won't push the content to the right; it's "floating" above the content.

    It may look okay in IE because IE may be doubling the margins you've set, making more distance between the two parts. After the part where you float:left add display:inline to trick IE into showing the correct amount of margin.

    You could also not have your navigation not so far from the left side of the page (it's got a left margin of 30px), cause see it doesn't line up with the box underneath.

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2005
    Location
    USA
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmm...I'll give that a try and see what happens!

    Thank you for the reply, I appreciate it.

  4. #4
    SitePoint Enthusiast
    Join Date
    Nov 2005
    Location
    USA
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, that didn't seem to make a difference...

    I tried it out on a test page with a test style sheet

    http://www.wacoclassic.com/about_test.html

    Any other ideas?


    Thank you!

  5. #5
    SitePoint Enthusiast traxxas's Avatar
    Join Date
    Jan 2007
    Location
    San Diego, CA
    Posts
    67
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it looks like there is a left padding in the UL that contains your navigation links that is pushing it into the content.

  6. #6
    SitePoint Enthusiast
    Join Date
    Nov 2005
    Location
    USA
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, to me it looks like the content in the center is pushed to the left into the navigation area. Seems like the nav bars are in the same place across different browsers, but the text has moved. Theres a huge white space to the right of it.

    I appreciate the post, but I don't think the padding in the ul is my problem.

  7. #7
    SitePoint Enthusiast traxxas's Avatar
    Join Date
    Jan 2007
    Location
    San Diego, CA
    Posts
    67
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The padding in the ul is the problem in the about_test.html page. That page fixes the first problem you're having with margins on the content, not pushing it past the floated div.nav. You either need to push the content over by ul width+ul padding or decrease the ul padding and ul width so it is the same as the width of div.nav.

  8. #8
    SitePoint Enthusiast
    Join Date
    Nov 2005
    Location
    USA
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'll work on it, thanks for the reply!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •