SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Zealot lightningstriker's Avatar
    Join Date
    Jan 2006
    Posts
    190
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problem with a 2 column layout aligning

    Hi there,
    Heres my problem with this layout I coded, this is my first layout in css so here goes:
    Everything works perfectly in firefox/opera, and all but one thing works perfectly in IE6.
    I'm getting caught up here: (view attached screenshots: Firefox_Screen, IE_Screen.)
    I have a 2 column layout with the main content being on the left, and a navigation bar ("nav") on the right.
    I have the nav bar with a left border of 2px, and I want the border to line up to the black part of the links menu above it, as shown in the firefox screenshot. However, when I go to view it in IE, its messes up the alignment of the nav bar/nav border.
    Any ideas why this is like this and how to fix it?
    (please note, this version of the site is not yet online)

    Here is the css stylesheet for the page:


    Code CSS:
    * {
    	margin: 0;
    	padding: 0;
    }
    body {
    	background: #000 url(bg.png) repeat;
    	text-align: center;
    }
    a:link, a:visited, a:active {
    	color: #006699;
    	text-decoration: none;
    }
    a:hover {
    	color: #6C8C37;
    	text-decoration: underline;
    }
    #page {
    	margin: 0 auto;
    	width: 750px;
    	background-color: #fff;
    	text-align: left;
    	border: 3px solid #fff;
    	margin-top: 8px;
    }
    #header {
    	width: 750;
    	height: 183;
    	padding: 0px;
    	margin: 0px;
    	margin-bottom: 3px;
    	background: #e7e7e7 url(headimg.gif) no-repeat;
    }
    #header img {
    	margin: 0px;
    	padding: 0px;
    	padding-bottom: 3px;
    }
    #links {
    	width: 750px;
    	background: #e7e7e7 url(links.gif) no-repeat;
    }
    #content {
    	float: left;
    	width: 512px;
    	height: 40%;
    	padding: 20px;
    	text-align: left;
    }
    #content p {
    	padding: 12px;
    }
    #nav {
    	border-left: 2px solid #aaa;
    	float: right;
    	width: 156px;
    	height: 40%;
    	padding: 20px;
    	text-align: left;
    }
    #nav p {
    	padding: 12px;
    }
    #nav ul {
    	list-style: none;
    	padding-left: 12px;
    }
    #nav h1 {
     
    	margin-left: -5px;
    	border-bottom: 1px solid #aaa;
    	font: normal 18px Georgia;
    	color: #6C8C37;
    }
    #footer {
    	clear: both;
    	width: 750px;
    	text-align: center;
    	color: #006699;
    	background-color: #aaa;
    }
    .clear {
    	clear: both;
    }
    Attached Images Attached Images

  2. #2
    Sesame Street Iimitk's Avatar
    Join Date
    Feb 2006
    Posts
    662
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not quite sure if I've understood you, & the attachments are still awaiting moderation so I cannot help you on your specific problem right away, but there's already in error in your CSS:
    Code css:
     
    #header {
       width: 750;
        height: 183;
        padding: 0px;
        margin: 0px;
        margin-bottom: 3px;
        background: #e7e7e7 url(headimg.gif) no-repeat;
    }
    You should specify measurement values for the width & height properties. Only 0 is accepted as a value as its own. Here's the correct code:
    Code css:
    #header {
        width: 750px;
        height: 183px;
        padding: 0;
        margin: 0;
        margin-bottom: 3px;
        background: #e7e7e7 url(headimg.gif) no-repeat;
    }
    Imagination is more important than knowledge. - Einstein

  3. #3
    SitePoint Zealot lightningstriker's Avatar
    Join Date
    Jan 2006
    Posts
    190
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    okay, so instead of having "0px;" I should just put "0". I fixed that, but thats not whats giving me my border issue, I really do appreciate the correction though because I want it to be as valid as possible. I think the attachments are now approved by the way. The one on the left is the firefox screenshot, the one on the right is the ie screenshot.

  4. #4
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do you have a full and valid doctype at the start of the html page ? - looks to me like incorrect box-model due to IE in quirks mode...

  5. #5
    SitePoint Zealot lightningstriker's Avatar
    Join Date
    Jan 2006
    Posts
    190
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmm, I'm on a laptop right now so I can't be sure, but I'm leaning towards no. (I can't quite remember for certain.) Sounds like an interesting guess, you think that could be the problem? So if thats the problem and I put this at the top of the page it should fix it?

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

  6. #6
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Good choice of doctype suggestion - the most appropriate one for new pages at the moment. If the page doesn't have the doctype, then adding should solve that problem (may also introduce others too, but they are solvable - gotta love IE for taking the boredom out of web page design,....)

  7. #7
    SitePoint Zealot lightningstriker's Avatar
    Join Date
    Jan 2006
    Posts
    190
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yup, I wasn't exactly surprised when I designed the site and only tested it while designing with firefox, sat back, was quite happy, then thought, "woops, gonna need ie and opera tests" and then I wasn't so happy with what ie was doing with my brand new page...

    Anyways, thanks for the help, as soon as I get home I'll be adding the doctype, and if it makes more trouble with my page while fixing the border issue, thats probably means my html isn't valid?

  8. #8
    SitePoint Zealot lightningstriker's Avatar
    Join Date
    Jan 2006
    Posts
    190
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great, it works perfectly in ie now, thanks a lot for the suggestions!!!
    On a side note or two, I only encountered one problem which was where I said:

    Code CSS:
    height: 183;
    width: 750;

    it needed to say:

    Code CSS:
    height: 183px;
    width: 750px;

    That was the only problem.

    Also, just to be picky, does it matter whether my html is typed in CAPs or lowercase for proper validation?

    Anyways, thanks again!

  9. #9
    Sesame Street Iimitk's Avatar
    Join Date
    Feb 2006
    Posts
    662
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by lightningstriker View Post
    Great, it works perfectly in ie now, thanks a lot for the suggestions!!!
    On a side note or two, I only encountered one problem which was where I said:

    Code CSS:
    height: 183;
    width: 750;

    it needed to say:

    Code CSS:
    height: 183px;
    width: 750px;

    That was the only problem.

    Also, just to be picky, does it matter whether my html is typed in CAPs or lowercase for proper validation?

    Anyways, thanks again!
    That was my exact suggestion, but you seemed to pick up the padding & margin changes & overcome the addition of "px" to width & height! By the way, {padding: 0px; margin: 0px} works, but it has no meaning since zero is an absolute value.


    As about whether to use UPPERCASE or lowercase for HTML markup (not content), it doesn't matter if you're using HTML. XHTML on the contrary, does not allow UPPERCASE markup at all.
    Imagination is more important than knowledge. - Einstein

  10. #10
    SitePoint Zealot lightningstriker's Avatar
    Join Date
    Jan 2006
    Posts
    190
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thats ironic, your suggestion helped make my css a lot more "clean" since, when you suggested I take a closer look at things, it got me thinking about the whole "px" thing which in turn led me to the 183 needing the "px" at the end, etc. It also made me realize that the:

    padding: 0;
    margin: 0;

    Was actually unneeded since I had declared it up top with the:
    * {
    margin: 0;
    padding: 0;
    }

    So I just got rid of the whole 0px issue.

    Thanks for your help!

  11. #11
    Sesame Street Iimitk's Avatar
    Join Date
    Feb 2006
    Posts
    662
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's not about "cleanness" here. A length unit (i.e. px, pt, em, ex, mm, etc.) must be supplied for a measurement property's value (i.e. width, height, margin, padding, etc.). I think some browsers (Firefox & Opera) set "px" as a default length unit, so it is automatically added when a unit length is missing, but Internet Explorer doesn't set a default value & that's why problems only arose with it for you.

    If you had happened to use length units other than "px", you would've encountered problems with all other browsers.
    Imagination is more important than knowledge. - Einstein

  12. #12
    SitePoint Zealot lightningstriker's Avatar
    Join Date
    Jan 2006
    Posts
    190
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thats good to know about encountering other problems, I'll definitly keep that in mind when I do my next design. I normally use pixels for photoshop, so I'm fairly used using pixels.

    What about "pt" and "em" as in changing the font size, I've seen:

    Code CSS:
    font: normal italic 1.5em/18px Georgia, serif;

    That statement confused me when I saw it. If you have the time, could you explain that to me? also is it pretty standard and do all browsers recognize the "em" and "pt" statements the same?


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
  •