SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    Location
    York, Uk
    Posts
    916
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Ok in Firefox 2.0 not good in IE V6

    Hello..

    I'm working thru a sitepoint tutorial and have hit a problem.

    Here is the page http://www.thestreettheatreadvertisi...m/html_utopia/

    My specific problem is regarding the alignment of the three columns. In Firefox there is no problem but in IE V6 the three columns do not align to the top navigation bar titled "Home of the Hack".

    Here is the CSS
    HTML Code:
    body {
      margin: 0;
      padding: 0;
      background-color: #050845;
      color: white;
      background-image:  url(img/bg.jpg);
      background-repeat: repeat-x;
      font: small Arial, Helvetica, Verdana, sans-serif;
    }
    #wrapper {
      background-color: #fdf8f2;
      color: black;
      margin: 30px 40px 30px 40px;
      padding: 10px;
     
    }
    #header-bottom {
      border-top: 1px solid #b9d2e3;
      border-bottom: 1px solid #b9d2e3;
      height: 1%;
      }
      
    #header-bottom ul {
      margin: 0;
      padding: 0;
      padding: 0 25px 0 0;
      text-align: right;
    }
    #header-bottom li {
      display: inline;
      background-color: #fdf8f2;
      color: #050845;
    }
    #header-bottom a:link, #header-bottom a:visited {
      text-decoration: none;
      background-color: #fdf8f2;
      color: #050845;
    }
    #tagline {
      font-weight: bold;
      background-color: #fdf8f2;
      color: #050845;
      font-style: italic;
      margin: 0px;
      padding: 0 0 0 15px;
      width: 200px;
      float: left;
    }
    #ball {
      position: absolute;
      top: 110px;
      right: 55px;
    }
    #main {
      position: relative;
      top:0;
      left:  0;
      width: 100%;
      margin-top: 10px;
    }
    #content {
      margin: 0 240px 0 150px;
      border: 1px solid #b9d2e3;
      background-color: white;
      color: black;
    
    }
    #mainfeature {
      background-image:  url(img/mainimg.jpg);
      background-repeat: no-repeat;
      background-color: #112236;
      color: white;
      padding: 2em 2em 1em 200px;
      height: 1%;
    }
    #mainfeature h2 {
      margin: 0;
      font-weight: normal;
      font-size: 140%;
    }
    #mainfeature p {
      font-size: 110%;
    }
    #mainfeature p.more {
      margin-top: 0;
      text-align: right;
    }
    #mainfeature p.more a:link, #mainfeature p.more a:visited {
      color: white;
      background-image:  url(img/more-bullet.gif);
      background-repeat: no-repeat;
      background-position: center left;
      padding-left: 14px;
    }
    
    #content .inner {
      margin: 10px 20px 10px 40px;
    }
    #content .inner h2 {
      color: #245185;
      padding-bottom: 0.2em;
      border-bottom: 1px solid #b9d2e3;
      font-size: 110%;
    }
    #content .inner ul.features {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    #content .inner h3 {
      font-size: 130%;
    }
    #content .inner h3 a:link, #content .inner h3 a:visited {
      color: #245185;
    }
    #content .inner p {
      color: #666666;
      font-size: 90%;
      margin-left: 7%;
    }
    #content .inner .features li img {
      float: left;
      margin: 0 5px 5px 0;
    }
    #content .inner p.author {
      font-weight:  bold;
    }
    #content .inner p.more{
      margin-top: 0;
      text-align: right;
    }
    #content .inner p.more a:link, #content .inner p.more a:visited {
      color: black;
      background-image:  url(img/more-bullet.gif);
      background-repeat: no-repeat;
      background-position: center left;
      padding-left: 14px;
      font-size: 90%;
      color: #1e4c82;
    }
    #sidebar {
      position: absolute;
      top: 0;
      right: 0;
      width: 220px;
      background-color: #256290;
      color: white;
      margin: 0;
      padding: 0;
    }
    #sidebar h3 {
      font-size: 110%;
      background-image:  url(file:///C|/Web/table_sitepoint/chapter08/web_site_files/02_creating_the_layout/img/sidebar-header-bg.jpg);
      background-repeat: no-repeat;
      margin: 0;
      padding: 0.2em 0 0.2em 10px;
      font-weight: normal;
    }
    #sidebar .inner {
      padding: 10px;
    }
    #sidebar ul {
      list-style-image:  url(file:///C|/Web/table_sitepoint/chapter08/web_site_files/02_creating_the_layout/img/more-bullet.gif);
      margin-left: 0;
      padding-left: 20px;
    }
    #sidebar p, #sidebar li {
      font-size: 90%;
      line-height: 1.4em;
    }
    #sidebar ul a:link, #sidebar ul a:visited {
      color: white;
    }
    #sidebar .date {
      font-weight: bold;
    }
    #searchform .text {
      width: 196px;
      border: 1px solid #45bac0;
    }
    #searchform .searchbutton {
      text-align: right;
      margin-top: 4px;
      
    }
    #searchform .btn {
      border: 1px solid #45bac0;
      background-color: #256290;
      color: white; 
      
    }
    #sidebar .motm-image {
      float: right;
      margin: 0 30px 0 20px;
    }
    #sidebar p.more {
      clear: right;
      margin: 0 30px 0 0;
      text-align: right;
    }
    #sidebar p.more a:link, #sidebar p.more a:visited {
      color: white;
      background-image:  url(file:///C|/Web/table_sitepoint/chapter08/web_site_files/02_creating_the_layout/img/more-bullet.gif);
      background-repeat: no-repeat;
      background-position: center left;
      padding-left: 14px;
    }
    #sidebar2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 159px;
    border-top: 1px solid #b9d2e3;
    border-left: 1px solid #b9d2e3;
    border-bottom: 1 px solid #b9d2e3;
    background-color: white;
    color: black;
    margin: 0;
    padding: 0;
    }
    
    #sidebar2 .inner {
    margin: 10px;
    }
    
    #sidebar2 a:link, #sidebar2 a:visited {
    color: #245185;
    font-weight: bold;
    }
    
    #sidebar2 h3 {
    color: #245185;
    padding-bottom: 0.2em;
    border-bottom: 1px solid #b9d2e3;
    font size: 110%;
    }
    Ive tried in vein a number of tweeks here and there but Ive ran out of ideas
    Any suggestions how i could make the columns line up directly under the Home of the hack bit very welcome...
    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977
    http://www.davidclick.com

  2. #2
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Kent
    Posts
    1,921
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    It's broken in FF, IE6 and IE7

    do you design on a big screen with a high resolution? cos on my screens, the two columns on the left and right overlap the central column. If you have FF with the web developer plug-in, look at it with outline block elements ticked, in a browser window of about 1000px wide, and you can see the overlap.

    Shouldn't the class inner in #content have a width defined or have I missed it somewhere?

    Edit
    Just noticed you have fixed margins for content to bring it in from the left and right columns. BUT the left and right columns have a width defined as a percentage - they vary. So overlap is inevitable unless my screen matches yours exactly.

  3. #3
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    Location
    York, Uk
    Posts
    916
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dr John View Post
    It's broken in FF, IE6 and IE7

    do you design on a big screen with a high resolution? cos on my screens, the two columns on the left and right overlap the central column. If you have FF with the web developer plug-in, look at it with outline block elements ticked, in a browser window of about 1000px wide, and you can see the overlap.
    How do i get the web developer plug in? Searched for it in FF help, no luck...
    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977
    http://www.davidclick.com

  4. #4
    SitePoint Addict buildakicker's Avatar
    Join Date
    Jun 2005
    Location
    NorCal
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    https://addons.mozilla.org/firefox/60/

    If you use the EDIT CSS tool, you can understand CSS really fast. I love this tool!
    SKILEASES.COM - FREE rental listings!
    WILDFIREBLOG.COM - Wildland Fire microblog!

  5. #5
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    Location
    York, Uk
    Posts
    916
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by buildakicker View Post
    https://addons.mozilla.org/firefox/60/

    If you use the EDIT CSS tool, you can understand CSS really fast. I love this tool!
    Wow!! This is damn useful, thank you all
    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977
    http://www.davidclick.com


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
  •