SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Thread: Whats wrong?

  1. #1
    SitePoint Wizard Darren884's Avatar
    Join Date
    Aug 2003
    Location
    Southern California, United States
    Posts
    1,616
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Whats wrong?

    Whats wrong with my layout? In explorer, it displays fine. However in firefox, it displays weird with the content on top.

    CSS:
    body
    {
    font-family: arial, helvetica, sans-serif;
    margin: 0;
    }
    form
    {
    margin: 0;
    }
    a.search-category:link
    {
    color: #0E32A8;
    font-size: 16px;
    font-weight: bold;
    }
    a.search-category:visited
    {
    color: #0E32A8;
    font-size: 16px;
    font-weight: bold;
    }
    a.search-category:hover
    {
    color: #3DAC4C;
    font-size: 16px;
    font-weight: bold;
    }
    a.search-category:active
    {
    color: #3DAC4C;
    font-size: 16px;
    font-weight: bold;
    }
    a.search-link:link
    {
    color: #0E32A8;
    }
    a.search-link:visited
    {
    color: #0E32A8;
    }
    a.search-link:hover
    {
    color: #3DAC4C;
    font-weight: bold;
    }
    a.search-link:active
    {
    color: #3DAC4C;
    }
    a.sidebar:link
    {
    color: #FFFFFF;
    text-decoration: none;
    }
    a.sidebar:visited
    {
    color: #FFFFFF;
    text-decoration: none;
    }
    a.sidebar:hover
    {
    color: #FFD400;
    text-decoration: underline;
    }
    a.sidebar:active
    {
    color: #FFD400;
    text-decoration: none;
    }
    #header
    {
    width: 100%;
    background-color: #0E32A8;
    background-image: url(images/header_02.gif);
    }
    #header-left
    {
    float: left;
    }
    #header-right
    {
    float: right;
    }
    #sidebar
    {
    background-color: #0E32A8;
    color: #FFFFFF;
    font-size: 14px;
    float: left;
    padding: 4px;
    width: 190px;
    }
    #middle
    {
    }
    #footer
    {
    background-color: #0E32A8;
    color: #FFFFFF;
    font-size: 14px;
    padding: 4px;
    text-align: center;
    }
    .sidebar-top-searches
    {
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    }
    .clear
    {
    clear: both;
    }


    What could be making it be weird?
    Last edited by Darren884; Mar 6, 2005 at 18:21.
    Have a good day.

  2. #2
    SitePoint Member
    Join Date
    Mar 2005
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That allways hapens to me, what I think causes it is that one shows it bigger than the other. Try looking in dreamweaver for help, it I think has a section that fixes errors.

  3. #3
    SitePoint Member
    Join Date
    Dec 2004
    Location
    UK
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    #header
    {
    	width: 100%;
    	background-color: #0E32A8;
    	background-image: url(images/header_02.gif);
    	float: left;
    }
    (btw, check your header_01.gif, I think it's saved in png format not gif )

  4. #4
    SitePoint Wizard Darren884's Avatar
    Join Date
    Aug 2003
    Location
    Southern California, United States
    Posts
    1,616
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Are you sure? Why would being saved in png make it different?
    Have a good day.

  5. #5
    SitePoint Guru DocType's Avatar
    Join Date
    Feb 2005
    Posts
    827
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't think theirs anything wrong with the image format, if it were saved in any format other than the one called for, all you'd get is the red-X-in-a-box.

    It looks like you've got your clear:both in the wrong place.

    You floated the #header-left, and the #header-right, repectfully, then you tried to float:left the #sidebar, #middle static, .sidebar-top-searches, then issued a clear:both.

    So the browser tried to put whatever would go, up there, and it cleared the last float/s you put up.

    If you don't want anything other than the headers up there, then you need to clear them before you try to put anything static under them, else the browser will try to put it up there with them, if it thinks theirs enough room.

    Like bm-graphix said "That allways hapens to me, what I think causes it is that one shows it bigger than the other".

    That's true, if one of them is IE.

    If the browser thinks it'll fit, then it'll end up there(results may vary, depending on your current browser).

    That's what I see happening anyways.

    You might want to try issuing the clear:both right after you've positioned the headers, and whatever else you want on the top, then float your sidebar.

    Let me know if that helps, cause I'm not too swift when it comes to floats myself, but I'm working on it.
    Last edited by DocType; Mar 6, 2005 at 06:37. Reason: I wanted to

  6. #6
    SitePoint Member
    Join Date
    Dec 2004
    Location
    UK
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Darren884
    Are you sure? Why would being saved in png make it different?
    It doesn't appear to be causing a problem I just thought I'd mention it. When I tried to save your graphics to play around with the page header_01 tried to save as header_01.gif.png I saved it as header_01.gif and tried to open it in Paint Shop Pro and it said it was in the wrong format. Just thought I'd let you know.

    The header problem may be something to do with clear, I don't know the technicalities of how it *should* work, but if you float:left the #header div (as I have above) it works fine.

  7. #7
    SitePoint Wizard Darren884's Avatar
    Join Date
    Aug 2003
    Location
    Southern California, United States
    Posts
    1,616
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks it works, and I also changed the format of the file.
    Have a good day.


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
  •