I’ve been checking out my layout on multiple browsers. it’s been displaying inproperly on ie7,6, and lower.
i’m using css floats to display my navigation bar(images in a certain order) and it’s getting pushed to the right in certain browsers.
check it out at ai-analysis.com/index.html
please give me feedback on how i can make this layout more browser compatible.
thanks.
This is a bit of mess, unfortunately. You’re trying to force the second set of images (the navigation) onto a new line by clearing the first item, but with some weird CSS mixed in. This is not a good idea.
Here’s what you’d be better off doing:
(e.g., why on earth have you made set the body as an inline block?)Sorry, short of time this evening. If no one’s done this for you by tomorrow, I’ll show you a proper way of doing this layout.
(Also, really don’t bother supporting IE less than 6).
yeah trying to make sure this is supported on 6 since a lot of big corporate intranets still use it. and i put the inline block cause i saw somebody recommend using it for a css bug in ie6. But i was testing it out. I’m a confused as to fix this. as i’ve been messing with it by searching for ways online to fix it, but have come up empty as far as solutions.
Hi,
Patrick addressed the main points so here’s a tidy up that addresses those issues.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ai analysis: leading IT services firm NYC</title>
<!-- web developer: Wei Chan, programmer: Wei Chan, Designer: Wei Chan -->
<style type="text/css">
/* small reset*/
html, body, table {
margin: 0;
padding: 0;
font-size: 100%;
}
object, iframe, blockquote,
h1, h2, h3, h4, h5, h6,
p, dl, dt, dd, ol, ul,
fieldset, form, legend, table, caption, th, td {
margin: 0;
padding: 0;
border:none;
}
ol, ul {list-style: none;}
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
vertical-align:top;
}
a {text-decoration:none;color:#333;}
a:visited {color:#333;}
a:hover { text-decoration:underline;}
a:active {text-decoration:underline;}
a img, img {border: 0 none;}
/* main page styling */
html, body {
height:100%;
}
body {
font-family: arial, helvetica, sans-serif;
font-size: 100%;
background:#000;
color:#fff;
text-align:center;
}
#outer {
font-size:85%;
width:600px;
margin:auto;
background:#fff;
color:#000;
min-height:100%;
text-align: left;
}
* html #outer {
height:100%;/* min height for ie6 */
}
.logo, .logo a {
margin:0;
width:600px;
height:285px;
overflow:hidden;
position:relative;
display:block;
}
.logo span {
position:absolute;
width:301px;
height:285px;
top:0;
left:0;
background:url(http://ai-analysis.com/images/sitebanner_01.gif) no-repeat 0 0;
}
.logo b {
position:absolute;
width:299px;
height:285px;
top:0;
left:301px;
background:url(http://ai-analysis.com/images/sitebanner_02.gif) no-repeat 0 0;
}
ul#nav {
margin:0;
height:50px;
clear:both;
}
#nav li, #nav li span, #nav li a {
float:left;
height:50px;
width:100%;
position:relative;
text-decoration:none;
overflow:hidden;
}
li#nav-1a {width:100px;}
li#nav-1b {width: 94px;}
li#nav-1c {width:96px;}
li#nav-1d {width:105px;}
li#nav-1e {width:95px;}
li#nav-1f {width:110px;}
#nav-1a span {background:url(http://ai-analysis.com/images/sitebanner_03.gif) no-repeat 0 0;}
#nav-1b span {background:url(http://ai-analysis.com/images/sitebanner_04.gif) no-repeat 0 0;}
#nav-1c span {background:url(http://ai-analysis.com/images/sitebanner_05.gif) no-repeat 0 0;}
#nav-1d span {background:url(http://ai-analysis.com/images/sitebanner_06.gif) no-repeat 0 0;}
#nav-1e span {background:url(http://ai-analysis.com/images/sitebanner_07.gif) no-repeat 0 0;}
#nav-1f span {background:url(http://ai-analysis.com/images/sitebanner_08.gif) no-repeat 0 0;}
ul#nav li span {
position:absolute;
left:0;
top:0;
}
#main {
clear:both;
padding:25px;
min-height:0;
}
* html #main{zoom:1.0}
#main p {
margin:.75em 0;
font-size: .85em;
}
#main h2 {
font-size: .85em;
margin:1em 0;
}
</style>
</head>
<body>
<div id="outer">
<h1 class="logo"><a href="#">AI Analysis<span><b></b></span></a></h1>
<ul id="nav">
<li id="nav-1a"><a href="profile.html">Company Profile<span></span></a></li>
<li id="nav-1b"><a href="services.html">Services <span></span></a></li>
<li id="nav-1c"><a href="folio.html">Portfolio<span></span></a></li>
<li id="nav-1d"><a href="host.html">Web Hosting<span></span></a></li>
<li id="nav-1e"><a href="train.html">Training<span></span></a></li>
<li id="nav-1f"><a href="contact.html">Contact Us<span></span></a></li>
</ul>
<div id="main">
<p>ai analysis, established in 1998 is a leading information technology firm based in the heart of the financial district of New York City with consultants around the metropolitan landscape. </p>
<p>Since ai's appearance on silicon alley, ai has been on top of innovative IT solutions and inventing new ways to solve IT problems for small to medium businesses and providing enterprise solutions. </p>
<h2>ideas</h2>
<p>a lot of successful businesses start out from an idea, but without ai analysis, they would stay ideas.
ai's team of experienced IT consultants brings creativity, ingenuity, and insight into creating, branding, and creating the foundation for your IT business solution.</p>
<h2>managed IT services</h2>
<p>Because managing a large enterprise's IT operations is a very time consuming process, many enterprises and corporations look to outsource to a reliable IT firm such as AI. With it's keen eye and meticulous attention to detail, ai analysis provides the most comprehensive managed IT solution for corporations and small businesses alike. </p>
<p>Copyright 2011 © ai analysis llc. All rights reserved. all ai analysis and Partner logos and copy remains the sole copyright of the Affiliate or Partner. </p>
<p><strong> <a href="/careers.html">career opportunities</a></strong></p>
</div>
</div>
</body>
</html>
You should make the header image a single image as Patric said as I didn’t have time to go and join them up.
The header and the nav us a gilder/levin image replacement which you can read up on here. That will leave you the choice of doing a rollover image on the nav quite easily now by making a double image and swapping the background-position on hover.
Use html semantically and don’t just use p elements made bold for headings. Use the heading tags (in a logical order) as that was what they were designed for.
You also had no images showing in Firefox because you had the slash the wrong way around in the path.
As Patrick said using inline-block on the body is a nonsense as there is never a need for that.
Hope that helps
Okay, so here’s a version of what could work for you. This is very simplified, and I’m making some assumptions, such as that you’re using a single image for the header, which includes the logo (this isn’t necessarily the best way to do it, but I’m including it for demonstration).
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ai analysis: leading IT services firm NYC</title>
<!-- web developer: Wei Chan, programmer: Wei Chan, Designer: Wei Chan -->
<style type="text/css">
body{
color: #000000;
font-family: arial, helvetica, sans-serif;
font-size: .85em;
margin: 0px;
padding: 0px;
}
#container {
margin: 0 auto;
width: 600px;
}
ul.nav, .nav li, h1 {
margin: 0;
padding: 0;
}
ul.nav {
list-style: none;
}
.nav li {
float: left;
}
</style>
<body>
<div id="container">
<h1>
<img src="images/sitebanner_01.gif" alt="AI Analysis"/>
</h1>
<ul class="nav">
<li>
<a href="">
<img src="images/sitebanner_03.gif" alt="Company Profile" />
</a>
</li>
<li>
<a href="">
<img src="images/sitebanner_04.gif" alt="Company Profile" />
</a>
</li>
<li>
<a href="">
<img src="images/sitebanner_05.gif" alt="Company Profile" />
</a>
</li>
<li>
<a href="">
<img src="images/sitebanner_06.gif" alt="Company Profile" />
</a>
</li>
<li>
<a href="">
<img src="images/sitebanner_07.gif" alt="Company Profile" />
</a>
</li>
<li>
<a href="">
<img src="images/sitebanner_08.gif" alt="Company Profile" />
</a>
</li>
</ul>
<div class="feature">
</div>
</div>
</body>
</html>
I haven’t tested this on IE because I don’t have IE here, but I can’t see any reason why it wouldn’t work.
Note the changes to your HTML as well as to the CSS.
Oh, look. Paul got there with a much more comprehensive and accessible version before I did. Use his!
Sorry Patrick - I should have waited a bit longer (been away all weekend and just jumped in - sorry.)
thanks a lot to both of you gentlemen. This is very helpful. i’ve uploaded and tested it on netrenderer and it looks good in ie6, i’ll check how it looks on a real browser at work.
hopefully i’ll be able to find time to get this whole design cleaned up and finished.
thanks again. do you know any good sites or books that address the various browser compatibility issues?
Not at all. If I’d seen your answer before I started mine, I would have been very happy to save 10 minutes.
The Sitepoint online reference lists all the major bugs and compatibility issues associated with properties/values across common browsers. (It’s not meant as a tutorial though but as a fully detailed reference.)