SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Padding or Margin issue causing middle content to move right

    My site: www.kentuckygolfing.com (which looks the same now in both IE and FF)

    The areas in question: http://www.kentuckygolfing.com/artic...s-another-test and http://www.kentuckygolfing.com/cours...f-country-club

    In FF they are fine (as usual), but IE you can see the problem right off I'm sure. The middle column content is pushed right about 10px, and as a result of that happening, the Navigation Menu has no room so is dropped down below the content on the left column.

    I've looked and looked and I can't find the problem. I've tried to be aware of the box model and watching my padding and margins on elements, but I could have made a mistake, I just can't seem to pinpoint it. It's got to be some element that's added to those two pages like the comments or the course detailed information because as you can see the homepage is perfectly fine but those other pages (using same stylesheet and html layout) are not fine.

    Anyone have any ideas?

    Thanks
    Last edited by deronsizemore; Sep 22, 2006 at 11:52.
    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore

  2. #2
    I hate Spammers mobyme's Avatar
    Join Date
    Apr 2004
    Location
    Sunny Snowdonia
    Posts
    662
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Looks absolutely fine in IE6
    There are three kinds of men:
    The ones that learn by reading.
    The few who learn by observation.
    The rest of us have to pee on the electric fence.

  3. #3
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Mobyme...I actually just now fixed it! :-) It did look bad, I swear!

    I was on my way back to say I fixed it, and you posted before I got here.
    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore

  4. #4
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, well, you see this:
    <!--[if gte IE 5]>
    and this:
    <!--[if IE 6]>
    and this:
    <!--[if IE 7]>

    are really good indicators you are overthinking your solutions and/or CSS... and a good indicator you are likely making so much more work for yourself than just starting over from scratch with a layout that WORKS cross browser without all that.

    Especially since looking at it, I see no 'deal breakers' that warrants 580 lines of CSS for such a simple fixed layout.

    BTW, it looks pretty broken in Opera, and with 'Large fonts' in all the other browsers... the search bar is blowing out it's container.

    Not trying to be confrontational, just think that you need to hear the truth... The HTML itself isn't too bad, though some formatting would be nice (though because it's CGI backed, I can forgive that - formatting HTML AND PHP at the same time is a pain)... I'm sure a few tags there are unneccessary or just the wrong tag, but the CSS is a definate cringe...

  5. #5
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would love to know where to start to fix it so I don't have the IE only conditionals. I tried but wasn't having much luck, so resorted to conditionals as from everything I was reading online, conditionals were perfectly fine to use for IE. Although, I'm sure the ones that I've used, there's a perfectly good way to do it without them, but my CSS ability prevents me to doing so. I really just used them to get IE to look EXACTLY like FF (that was my goal) and it does now so I'm happy. I could leave the IE conditionals out and it would still look okay, just not exactly like FF.

    The actual CSS for the layout itself was not 580 lines of code...actually it was 80 lines (I still have the basic design saved). The rest is different styles for menus, images, comments, forms, etc...alot of which are not even visible on the site as you see it now because alot of those areas are added dynamically when new content is added through the CMS, so it probably does look like I've got way to much code for what you see there. As for the formatting, I can't help that, the CMS I use, that's one of the downfalls, if I have the html/css formatted to look all nice and neat, it's a pain in the neck to try and edit in the CMS. I have to pick my poison there...go for looks, or usability for me.

    I will have to have a look at Opera, haven't checked it yet. What "other browsers" are you speaking of? I've checked it in Safari, FireFox, and IE on mac and the only thing I saw was the search bar was a little longer which pushed the go button down...didn't noticed any large fonts. I may have missed them?

    If you can give me some insight on what to change to make everything better I'm all ears. I'm always up for learning new things, because I realize I'm not an expert...never claimed to be. Just doing the best with what knowledge I've got. As for redoing the whole layout...I can't do that. I've got to much time invested in this one and it's for the most part finished just need to start adding conent, and even though it may not be the best way to go about it, it works. I'll just have to take this as a learning experience for next time.
    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore

  6. #6
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    By others I mean IE and Firefox. With windows set to the 'large fonts' aka 120 dpi setting, the search box is blowing out of it's container... Which probably means you didn't fix it's with in px.

  7. #7
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmmm...all of the font sizes should be fixed with px sizes. I've got 12px explicitly set in the body of the css and unless the size changed, I didn't set 12px on everything...should I have?

    Like I've got 12px specified in the body, and the #maincontent is also 12px so I didn't specify 12px for #maincontent because it was already specified in the body...should I specify it in #maincontent also?
    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore

  8. #8
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think that with:
    #search input {
    margin-right: 3px;
    margin-top: -1px;
    width: 154px;
    }

    that the width part should be outside the conditional, declared for all browsers... on my end it's almost like that's not going off for IE, either that or 154px is too much... The other browsers are resorting to the html's ' size="22" ', and being that input tends to ignore font settings in 'body' in most browsers... you might also be able to 'fix' the large font support by redeclaring your font size in '#search input'.

    At least, that's my best guess... because I'm willing to bet the search box isn't supposed to overlap 'home' on the menu, nor should the down-right arrow button after it be on it's own line below and flush left.... Am I right?

  9. #9
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah thank you! That was a small oversight by me. I 'thought' that I did have a width declared in the CSS for all browsers, but after looking, I did not. Since I thought I did have a width set already, IE kept messing up the width so that's why I used the conditional width for IE, whens didn't know what to use. Thanks for pointing that out.

    Can you tell me what size font you're using for FF? I tried to look and set it to "large" but it's only allowing me to set an actual pixel amount for the browser font size. I'd like to see what you're talking about so I can try to fix most or all of it. I'm also not seeing how to set a font size to "large" in IE...it only allows me to set the face of the font not the size.

    I'm going to go download Opera also, so I can see what's going on there.

    Thanks
    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore

  10. #10
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deronsizemore
    Can you tell me what size font you're using for FF? I tried to look and set it to "large" but it's only allowing me to set an actual pixel amount for the browser font size. I'd like to see what you're talking about so I can try to fix most or all of it. I'm also not seeing how to set a font size to "large" in IE...it only allows me to set the face of the font not the size.
    I'm not referring to the browser font settings, I'm referring to the 'system metric' or 'dpi settings' which effect every program installed in windows (in theory at least)... See, windows fonts are declared in pt - which means if you change how many pixels per inch windows thinks it's using, you change the size of all pt sized fonts system-wide. Being that Opera and IE's default fonts sizes are based on that setting (with firefox being a dick and ignoring that setting for it's default font, but at least paying attention to pt) you generally have to plan for it.

    In win 2K/XP/9x - Display Properties > Settings > Advanced > General > DPI setting: - set that for 120dpi. Generally it helps to up the resolution one notch before applying that if on a CRT (if you are comfortable at 1024x768 for example, you should up to 1280x960.... 1280x960 should be upped to 1600x1200, etc, etc) and it requires a reboot... can also be done on Windows 3.x during driver installation (since 3.x used separate driver .inf files for each resolution)

    BTW, I am NOT referring to Display Properties > Appearance > Font size - that's the system fonts, not the system metric.

    The same thing can be done in *Nix through the .conf file for whichever version of X11 is being run... and allegedly OSX will be adding that in Leopard... Which makes sense given the resolutions a lot of these baby-sized 'widescreen' LCD's are running at.

    Increasingly more and more people are using this 'old' option as the native resolutions of LCD's climb while the sizes shrink.

  11. #11
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah, I see now. I was confused. lol.

    I've changed the dpi settings to 120dpi and I have my screen resolution to 1289x960 and in FF and IE everything seems to be good with my site. Can you confirm this on your end?

    Thanks
    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore

  12. #12
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yup, that got it.

  13. #13
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cool! Thanks for all your help!
    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore


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
  •