SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Zealot sethtrain's Avatar
    Join Date
    Dec 2003
    Location
    Paducah, KY
    Posts
    174
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Positioning problems with 3 column layout...

    Okay here is what is going on. I have this:



    when i view my page in Mozilla.

    I have this when I vew my page in Microsoft Internet Explorer:



    What I am doing is I have my code:

    HTML Code:
    <div id="left"> 
      <div id="leftcontent"> 
        <p><h1>This is a test</h1></p>
      </div>
    </div>
    And here is my CSS:

    Code:
    #left {
      position: absolute;
      left: 10px;
      top: 180px;
      width: 200px;
      border: solid #4B8CAC 1px;
    }
    #leftcontent h1 {
      background: #4B8CAC;
      margin: 0px;
      font: bold 14px Verdana,Arial,Helvetica,sans-serif;
      padding-left: 5px;
      padding-top: 2px;
      padding-bottom: 2px;
      color: #fff;
    }
    What is the problem?
    --
    sethtrain

  2. #2
    SitePoint Zealot cmorbutts's Avatar
    Join Date
    Apr 2002
    Location
    Sydney, Australia
    Posts
    173
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try to do this and see if it works.

    Code:
    .first
    {
    	margin-top: 0px;
    }
    Then

    HTML Code:
    [color=#000080]<div id=[/color][color=#0000ff]"left"[/color][color=#000080]>[/color] 
      [color=#000080]<div id=[color=#0000ff]"leftcontent"[/color]>[/color] 
    	[color=#000080]<p class="first">[/color][color=#000080]<h1>[/color]This is a test[color=#000080]</h1>[/color][color=#000080]</p>[/color]
      [color=#000080]</div>[/color]
    [color=#000080]</div>[/color]

  3. #3
    SitePoint Zealot sethtrain's Avatar
    Join Date
    Dec 2003
    Location
    Paducah, KY
    Posts
    174
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    didn't work
    --
    sethtrain

  4. #4
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    try....
    #left div p h1 {}

    but why's your H1 in a p?
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Thats because you can't have a h1 tag inside a p tag, its not valid. Take the p tags away from around the h1 tag.

    If you want the border to extend around something then you will need to either give the #left-content a margin or the #left a height.

    Or you could put a blank <p></p> after the h1 which would be a bit of a waste unless you are going to put content there.

    Heres one solution anyway:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    #left {
      position: absolute;
      left: 10px;
      top: 180px;
      width: 200px;
      border: solid #4B8CAC 1px;
    }
    #leftcontent h1 {
      background: #4B8CAC;
      margin: 0px;
      font: bold 14px Verdana,Arial,Helvetica,sans-serif;
      padding-left: 5px;
      padding-top: 2px;
      padding-bottom: 2px;
      color: #fff;
      margin-bottom:20px;
    }
    </style>
    </head>
    <body>
    <div id="left"> 
      <div id="leftcontent"> 
    	<h1>This is a test</h1>
      </div>
    </div>
    </body>
    </html>
    But as I always say it does depend on what comes next

    Paul

  6. #6
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Unless you need the id="leftcontent" you can otherwise use just #left div h1 {}
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Well you don't actually need the div either in that case .
    Code:
    <style type="text/css">
    #left {
    position: absolute;
    left: 10px;
    top: 180px;
    width: 200px;
    border: solid #4B8CAC 1px;
    }
    #left h1 {
    background: #4B8CAC;
    margin: 0px;
    font: bold 14px Verdana,Arial,Helvetica,sans-serif;
    padding-left: 5px;
    padding-top: 2px;
    padding-bottom: 2px;
    color: #fff;
    margin-bottom:20px;
    }
    </style>
    </head>
    <body>
    <div id="left"> 
    <h1>This is a test</h1>
    </div>
    </body>
    </html>

  8. #8
    SitePoint Zealot sethtrain's Avatar
    Join Date
    Dec 2003
    Location
    Paducah, KY
    Posts
    174
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    as of now it is fixed. not by the way i want but all i had to do is set the footer margin bigger...i am fixing to check to see if that will cure the problem all together...
    --
    sethtrain

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    had to do is set the footer margin bigger
    What footer margin? Theres no footer in your code that I can see.

    The code I gave you works perfectly in all browsers, unless you are not showing us the code you're using and expecting us to guess

    Paul


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
  •