#1
  1. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Apr 2005
    Posts
    628
    Rep Power
    147

    Opera rendering / menu and image positioning


    Hello. This is probably not good practice but I have two problems arising with the same piece of code.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
      <head>
        <title>My site</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
         <style type="text/css">
           body {
             font-family: verdana, arial, helvetica, sans-serif;
             font-size: 0.8em;
             background: #cfcf00;
             margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
             padding: 0;
             padding-bottom: 2em;
             text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
             color: #303030; } /* end body */
          #logo_search {
            width: 100%;
            min-width: 957px; 
            max-height: 79px;
            padding: 32px 0 0 0; 
            border: 0;
            margin: auto;
            overflow: hide; 
            background: #ffffff; } /* end #logo_search */
          #logo_container { 
            width: 40%;
            float: left;
            background: #ffffff; 
            text-align: right;
            border: 0;
            border-bottom: 1px solid #ffffff;
            height: 51px;
            padding: 0;
            margin: auto; } /* end #logo_container */
          #base { 
            clear: both;
            padding-top: 1px;
            border-top: 1px solid #ffffff;
            border-bottom: 1px solid #ffffff;
            width: 100%; 
            background: #c0c0c0;  } /* end #base */
          #main_block { 
            background: #ff0000;
            margin: auto;
            text-align: left;
            width: 955px; } /* end #main_block */
          #main_content { 
            background: #ffffff;
            border-left: 1px solid #ff0000;
            padding-top: 1em;
            padding-bottom: 1em;
            border-right: 1px solid #ff0000; } /* end #main_content */
          #top_main_content ul {
            float: left;
            list-style-type: none;
            border-spacing: 0;
            padding: 0;
            text-align: right;
            border-top: 1px solid #00ff00;
            height: 243px;
            width: 266px; } /* end #top_main_content #links_table */
          #top_main_content ul li {
            vertical-align: middle;
            color: #0000ff;
            border-bottom: 1px solid #00ff00; } /* end #top_main_content #links_table td */
          #top_main_content ul li a { 
            line-height: 26px;
            padding-right: 1em;
            display: block;
            color: #0000ff;
            width: 259px; } /* end #top_main_content ul li a */
          #top_main_content ul li a:hover {
            background: #cfcf00; 
            color: #000000; } /* end #top_main_content ul li a:hover */
          #top_main_content img { 
            border-bottom: 1px solid #00ff00;
            border-top: 1px solid #00ff00;
            margin-top: 12px;
            text-align: right;
            vertical-align: top; } /* end #top_main_content img */
        </style>
      </head>
      <body>
        <div id="logo_search">
          <div id="logo_container">
            &nbsp;
          </div>
        </div>
        <div id="base">
          <div id="main_block">
            <div id="main_content">
              <div id="top_main_content">
                <ul>
                  <li><a href="#">Link 1</a></li>
                  <li><a href="#">Link 2</a></li>
                  <li><a href="#">Link 3</a></li>
                  <li><a href="#">Link 4</a></li>
                  <li><a href="#">Link 5</a></li>
                  <li><a href="#">Link 6</a></li>
                  <li><a href="#">Link 7</a></li>
                  <li><a href="#">Link 8</a></li>
                  <li><a href="#">Link 9</a></li>
                </ul>
                <img src="#" alt="" id="main_graphic" height="243" width="687"/>
              </div>
            </div>
          </div>
        </div>
      </body>
    </html>
    Problem 1 (Opera rendering): Opera (and only Opera from what I've noticed) is extended the border for the menu options into the side border. How can I eliminate this behavior? I added a margin-left: 1px to the menu and that will render it correctly in Opera but have an extra 1px of whitespace everywhere else.

    Problem 2: I'm trying to position this menu such that it lines up exactly with an image 243px high. One question I have is that if I add a 1px top and bottom border to an image that is 243px high, would that object still be 243px high or now 245px high? Also, I want to indent the menu options slightly so that they aren't exactly next to the image but I still need the entire bar to serve as a link. What would be the best approach to line up these objects. I can sort of do it with margin-top but I'm sure that's not the best way to go.

    Edited to add:
    Problem 3: The menu does not align with the left edge of the main section in IE and only IE. What can I do to fix this?
    Last edited by lokisapocalypse; August 13th, 2007 at 10:16 AM.
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    Do you really have a folder named "DTD" in the same directory as that file?

    overflow:hide doesn't exist. You mean overflow:hidden.

    You made the links be wider than the <ul> by giving them right padding of 1em.

    Adding top and bottom borders will add extra height to the <img>. Since you weren't sure of that, I suggest that you read up on the box models

    margin-top? Don't you want the image to the right of the menu?

    Remove the margin-top and vertical-align properties from "#top_main_content img" and give "#top_main_content ul" margin:0.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Apr 2005
    Posts
    628
    Rep Power
    147
    You make it look easy...thanks as always.
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    You're welcome.

    Experience does make it easier.

    You didn't answer my first question.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Apr 2005
    Posts
    628
    Rep Power
    147
    No my boss sent me an email telling me to change doctypes and said just replace it with this.
  10. #6
  11. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    The URL should point to the DTD file. It's best to use a doctype found in this list.

    Here's the one you're using with the correct URL:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo