SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict o~~Goatee~~o's Avatar
    Join Date
    Jan 2004
    Location
    North Yorkshire UK
    Posts
    350
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Can't get my site to display properly in opera and firebird, please help.

    Hi there

    I've taken the time to learn HTML and CSS in a couple of days as Dreamweaver was producing rubbish that wasn't anywhere near meeting HTML 4.01 standards.

    Anyway, I'm really chuffed with my first effort with hand coding and the page hardly uses any tables. Plus it meets HTML 4.01 and CSS W3C standards

    The problem is, despite my careful work it does not render very well in Opera and Firebird. Heres the test site (only homepage at the mo):

    http://homepage.ntlworld.com/mr.wint...cene/index.htm

    I was hoping someone more knowledgable than myself might be able to see why there are so many problems with the rendering

    Many thanks

  2. #2
    SitePoint Evangelist ClevaTreva's Avatar
    Join Date
    Jan 2004
    Location
    Chipping Campden, UK
    Posts
    403
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi

    Edit your main.css file and change the width of the outabox class to 820px.

    Is is clear then.





    Trevor
    PS. That is THE BEST UK bike page design I have seen on the web (I was recently looking to buy a Concept Respect - cheap but good for me).

  3. #3
    SitePoint Addict o~~Goatee~~o's Avatar
    Join Date
    Jan 2004
    Location
    North Yorkshire UK
    Posts
    350
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great, thank you very much Why did the previous way not work then?

    Maybe you could help with the last 2 issues:

    In firebird, most of the boxes are displayed too tall and elements are shifted to the left as you can see on the pic:

    http://homepage.ntlworld.com/mr.wint...r_prob_pic.jpg

    And in Opera, the subbox edges don't render properly:

    http://homepage.ntlworld.com/mr.wint...r_prob_pic.jpg

    Your help is much appreciated

    PS. That is THE BEST UK bike page design I have seen on the web
    Wow, thanks very much

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Most of your problems are related to the broken box model and also the fact that you need margin-left:auto and margin-righty:auto to center in browers other than ie. In ie your page is centred by the text-align center but mozilla and opera need the method as mentioned above.

    The broken box model is used in ie5 and ie5.5. and ie6 in quirks mode. An elements total width is defined by its width + borders + padding. However in the broken box model the borders and padding are subtracted from the width. The work around is not to add padding/borders on the outer element but on an inner element where a width hasn't be specified . Or alternatively us one of the many box model hacks around (the simplified box model hack (smbh) is recommended:

    http://www.info.com.ph/~etan/w3panth...ifiedsbmh.html

    You should really use a full doctype with uri which will put ie6 in standards mode and then it will display more like mozilla and opers. Obviously this will change some things on your page but that's the price you pay for not checking in each browser as you go. It's harder to work backwards from a finished design than it is to build from the ground up checking as you go.


    I haven't had time to sort out the box model problems but this should centre most of the items in mozilla and opera.

    Code:
    .outabox 
    {
     width: 810px;
     margin: 20px auto 5px;
     border: 0px solid black;
     background-color: white;
     padding:15px 0;
    }
    body 
    {
     background-color: #CCCCCC;
     margin:0px 0px 50px; padding:0px;
     text-align:center;
    }
    .top-box 
    {
     height: 110px;
     width: 780px;
     margin: auto;
     background-color: #000000;
     background-image: url(http://homepage.ntlworld.com/mr.wint...e/home/top.gif);
    }
    .image-box 
    {
     background-color: #666666;
     height: 110px;
     width: 780px;
     background-image: url(http://homepage.ntlworld.com/mr.wint...e/home/img.jpg);
     background-position: center center;
     margin: 5px auto;
    }
     
    .links-box 
    {
     background-color: #FF9900;
     width: 780px;
     height: 26px;
     margin: 5px auto;
     padding-top: 6px;
     padding-bottom: 6px;
    }
    .links 
    {
     color: #666666;
     font-size: 12px;
     text-align: center;
     letter-spacing: 2pt;
    }
    a:link 
    {
     color: black;
     text-decoration: none;
    }
    a:visited 
    {
     color: black;
     text-decoration: none;
    }
    a:hover 
    {
     color: #666666;
     text-decoration: underline
    }
    .content-box 
    {
     background-color: #666666;
     width: 780px;
     height: 394px;
     margin: 5px auto;
    }
    .content 
    {
     padding: 15px;
     height: 100%; 
    }
    .sub1-box 
    {
     background-color: #CCCC99;
     width: 249px;
     height: 350px;
     margin-top: 6px;
     margin-right: 5px;
     margin-left: 3px;
     float: left;
     border-color: black;
     border-style: solid;
     border-width: 1px;
    }
    .sub2-box 
    {
     background-color: #CCCC99;
     width: 250px;
     height: 350px;
     margin-top: 6px;
     float: left;
     border-color: black;
     border-style: solid;
     border-width: 1px;
    }
    .sub3-box 
    {
     background-color: #CCCC99;
     width: 250px;
     height: 350px;
     margin-top: 6px;
     margin-right: 3px;
     margin-left: 5px;
     float: left;
     border-color: black;
     border-style: solid;
     border-width: 1px;
    }
    .more-box 
    {
     background-color: #E3F1D0;
     height: 20px;
     width: 40px;
     font-size: 10px;
     font-weight: bold;
     border-color: black;
     border-style: solid;
     border-width: 1px;
     float: right;
     padding: 3px;
     margin: 2px;
    }
    .logo-box
    {
     background-color: white;
     width: 780px;
     height: 50px;
     margin: 5px auto;
     background-image: url(http://homepage.ntlworld.com/mr.wint...me/logo_bg.gif);
     background-repeat: no-repeat;
     background-position: center center;
    }
    .bottom-box 
    {
     background-color: #FF9900;
     width: 780px;
     height: 28px;
     margin: 5px auto;
     padding-top: 7px;
     padding-bottom: 7px;
    } 
    small
    {
     color: #CCCCCC; 
    }
    a.small:link 
    {
     color: #CCCCCC;
     font-weight: bold;
    }
    a.small:visited 
    {
     color: #CCCCCC;
     font-weight: bold;
    }
    a.small:hover 
    {
     color: #CCCCCC;
     font-weight: bold;
     text-decoration: underline;
    }
    p, ol, div, td {color:black; font-size:8pt; font-family:verdana}
    pre, address {color: black}
    Having said all that I think you've done a very good job if you've only been learning for a few days.

    If you're still having problems then shout

    Pasul

  5. #5
    SitePoint Zealot bo diddly's Avatar
    Join Date
    Nov 2002
    Location
    uk - worcester
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    looks fine now in opera 7 and mozilla 1.5 on win xp
    You're not drunk if you can lie on the floor without holding on

    www.idezign.me.uk
    www.theonlinediary.com

  6. #6
    SitePoint Addict o~~Goatee~~o's Avatar
    Join Date
    Jan 2004
    Location
    North Yorkshire UK
    Posts
    350
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by bo diddly
    looks fine now in opera 7 and mozilla 1.5 on win xp
    Yep, it does apart from a very minor spacing problem

    Thanks very much Paul O'B, your help is much appreciated. I think I'll look at geting rid of the tables now.

    Cheers


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
  •