CSS issues that I dont understand_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2022-12-17 12:12 出处：网络

Take a look at http://keramed.com in IE and FireFox. In FireFox, it looks how I would expect. In IE, the main block is much further down and I don\'t see it.

相关专题：css

Take a look at http://keramed.com in IE and FireFox.

In FireFox, it looks how I would expect. In IE, the main block is much further down and I don't see it.

Here is the CSS:

div#BoxHouse {
  margin-left: 0px; /* 72 */
  margin-right: 25px;
}

div.FloatingBox {
  text-align: center;
  float: left;
  width: 205px; 
  border: 1px solid #6C5C3B;
  padding: 0px 0px 5px 0px;
  background-image: url(transwhite.png);
  margin-left: 0.5em;
  margin-bottom: 30px;
}

div.FloatingContent {
  text-align: center;
  float: left;
  width: 90%;
  border: 0px solid #6C5C3B;
  padding: 0px;
  background-image: url(transwhite.png);
  margin-left: 0.5em;
}

#content {
  width: 90%;
  height: auto;
  background: url(transwhite.png);
  border: 1px solid #3F4933;
  margin-left: 35px; /* 72 */
  margin-right: 20px;
  margin-top: 8px;
  margin-bottom:20px;
  padding: 5px 0px 5px 0px;
  z-index: 1;
  overflow:auto;
  top: 5em;
  padding-top: 5px;
  }

#leftnavigation {
position : fixed;
height : auto;
top : 10%;
left : 0;
width : 30%; /* 40 */
margin : 0px 0px 0px 1px;
color : #000000;
padding : 0px;
overflow : auto;
}

#columncontent {
position : fixed;
top : 10%;
bottom : 100px;
margin : 40px 0px 0px 220px;
width : 80%;
height : auto;
padding-left : 5px;
padding-right : 12px;
color : #000000;
border-left : 1px solid #6C5C3B;
overflow : auto;
}

The code is:

<div id="leftnavigation">
  <开发者_高级运维;div id="BoxHouse">
     <br /><br /><br /><br /><br />
            <div id="Box1" class="FloatingBox">
                <span class="legend"><a name="announcements">Announcements</a></span>
                <?php include 'announcements.inc'; ?>
            </div>

            <br /><br /><br /><br /><br /><br />
            <div id="Box2" class="FloatingBox">
                <span class="legend"><a name="news">News</a></span>
                <?php include 'othernews.inc'; ?>
            </div>
            <br /><br />
        </div>
    </div>

    <div id="columncontent">
        <br />
        <div class="FloatingContent">
            <div id="container">

                    <!-- Main tabs across the top -->
                    <ul>
                        <li><a href="#Home"><span>Home</span></a></li>
                        <li><a href="#Products"><span>Products</span></a></li>

                        <?php
                            if ($_SESSION['ALLOWORDERING'] == "TRUE")
                                { ?> 
                                    <li><a href="#Ordering"><span>Ordering</span></a></li>
                        <?php } ?>

                        <li><a href="#AboutMain"><span>About KeraMed</span></a></li>
                        <li><a href="#MyKeramed"><span>My KeraMed</span></a></li>
                    </ul>


            </div>

        </div>
    </div>

I don't know why this is the case!

You have no Doctype, this triggers Quirks Mode, which causes browsers to behave inconsistently. It is considerably harder to deal with layout issues between browsers in Quirks mode.

Add a Doctype that triggers Standards (AKA Strict) Mode and validate your HTML. This might not resolve all your issues, but (as Pekka says) it is the most sensible starting point for doing so.

I'd recommend:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd">

It would also be wise to ditch the layout tables, abuse of multiple <br> elements as margins, and other presentational markup.

CSS issues that I dont understand

精彩评论

关注公众号

热门标签

图文推荐

CSS issues that I dont understand

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：