...

View Full Version : Div display issues in IE6



richardbecker
07-17-2007, 08:04 PM
Hi

I'm a graphic designer attempting my first site using CSS and div layouts. I've been building it in dreamweaver previewing in IE7 and Firefox 2, and except for a couple of minor issues, it's displaying fine. Then I tried previewing it in IE6... it's completely f**ked! I have div's that should be 2 pixels high (spaces between menu buttons), which display a height of 18px - strangely exactly the height of the buttons they appear between. On further inspection it seems that the 18px issue re-occurs in a few of the other other divs, like the .main-column div.

I'm not looking for anyone to fix this for me, but maybe just take a look at my code, tell me if there's anything blatantly wrong, and maybe set me on the right path... I'm not even sure where to start, considering that there are none of these issues in the newer browser versions.

Any help would be much appreciated.

Cheers

Here's the code from one of the pages, and I've attached the css file:
<body>
<div class="main-column">
<div class="top-mast-gradient"></div>
<div class="branded-banner">
<div onclick="location.href='index.html';" style="cursor:pointer;"class="DM-logo"></div>
<div class="main-nav-holder-350px">
<div class="main-nav">
<div class="nav-gap"></div>
<div class="highlight-left"></div>
<div onclick="location.href='about-main.html';" style="cursor:pointer;"class="nav-text">about</div>
<div class="highlight-right"></div>
<div class="nav-gap"></div>
<div class="highlight-space"></div>
<div onclick="location.href='design-main.html';" style="cursor:pointer;"class="nav-text">design</a></div>
<div class="highlight-space"></div>
<div class="nav-gap"></div>
<div class="highlight-space"></div>
<div onclick="location.href='illustration-main.html';" style="cursor:pointer;"class="nav-text">illustration</div>
<div class="highlight-space"></div>
<div class="nav-gap"></div>
<div class="highlight-space"></div>
<div onclick="location.href='news-main.html';" style="cursor:pointer;"class="nav-text">news</div>
<div class="highlight-space"></div>
<div class="highlight-space"></div>
</div>
</div>
<div class="telephone-holder">
<div class="telephone"><span class="style1">tel</span> +27 11 452 9183</div>
<div class="fax"><span class="style1">fax</span> +27 11 452 9183</div>

<div class="email"><span class="style1">email</span> enquiries@danielmckay.co.za</div>
<div align="right"> </div>
</div>
</div>
<div class="orange-band-18px"> <div class="breadcrumb-current-text-holder">about us </div>
</div>
<div class="white-line-1px"></div>
<div class="main-content-holder">
<div class="menu-holder">
<div onclick="location.href='services.html';" style="cursor:pointer;"class="menu-button">
<div class="header-and-button-text-holder">services</div>

</div>
<div class="menu-button-spacer"></div>
<div onclick="location.href='client-list.html';" style="cursor:pointer;"class="menu-button">
<div class="header-and-button-text-holder">client list</div>
</div>
<div class="menu-button-spacer"></div>
<div onclick="location.href='contact-us.html';" style="cursor:pointer;"class="menu-button">
<div class="header-and-button-text-holder">contact us</div>
</div>
<div class="menu-button-spacer"></div>
</div>

<div class="about-content-holder">
<div class="about-content-image-holder"></div>

<div class="about-header-holder"></div>
<div class="orange-strip"></div>
<div class="about-text-holder">
<div class="about-text-body">With capabilities in corporate identity, print, multimedia design and illustration,
were dedicated to helping clients gain a competitive advantage
by designing innovative solutions that satisfy real customer needs.
For us its just the beginning... <br/><br/>With unprecedented growth bringing an
infusion of young talent, the future is bright for daniel+mckay. Were
looking ahead to new challenges in the coming years and beyond,
continuing to help our clients capture the attention of potential
customers through compelling design.</div>
</div>
</div>
</div>
<div class="light-grey-band-730">
</div>
</div>


</body>

VIPStephan
07-17-2007, 09:30 PM
[] just take a look at my code, tell me if there's anything blatantly wrong, []

Err yes: your code. :eek:
Its hard for me to believe what I see there. OK, before you start on the wrong foot Im gonna tell you that the whole CSS talk is slightly distracting from the really and actually important thing: For the whole beauty of CSS to take place you need to write semantic HTML (http://www.boagworld.com/archives/2005/11/semantic_code_what_why_how.html). This point is the actual new thing when you switch from tables to CSS because you dont create websites with CSS but with clean, semantic, accessible HTML and only style it with CSS.

Semantic HTML means that every element has a purpose and is not only added to add some styles with CSS, hence empty elements are just as wrong as tables for layout. You structure and style your content, not add HTML just to style it. The basic thought is: If it doesnt make sense without styles then its wrong.

As to the height issue: you need to set the line height to zero because it will only be a small as the normal line height if not set specifically. However, if you use semantic code this issue will be obsolete anyway.

richardbecker
07-18-2007, 05:45 PM
Thanks a lot for getting back to me - so it's that bad hey? Ouch. I'll have to soak this in and give it another go... will surely be in touch soon.

Cheers



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum