Help with layout problems in IE6

[dthomas31uk]

Hi, Am just creating a webpage.

http://www.heraldicpottery.co.uk/GlassTransfers/Index.html

Everything looks great in Firefox, but when viewed in IE6 horrible little gaps appear in the swatches text and the contact text.

Can anyone advise.

The following is a link to the css

http://www.heraldicpottery.co.uk/GlassTransfers/style.css

Cheers

 

[Vragabond]

Hi,

Don't think I am trying to put down your effort, but (at least to me) there is no one apparent thing that breaks your design. I have however looked at your code and found many strange aspects which could be attributed to the misinterpretation. The more complicated your code gets, the bigger are the chances something might go wrong in some browser. Here are some observations:

1. Why is contact us div enclosed in welcome div? The solution in the other column (by using two separate divs) seems simpler and more effective. If you're having problems with floating, enclose both welcome and contact in another div which will be floated. There is no explanation why contact is a part of welcome from looking at the site.

2. You are using [tt]display: inline;[/tt] with [tt]float: left;[/tt]. While most browsers will in this case correctly ignore the display property (if element is floated it is automagically converted to block level), it might cause confusion.

3. Why are you floating single elements within their floated container. Sometimes you have just one div inside another div that contains text and you are floating that div. There is absolutely no need for that, since there is no other element you div is floated against.

I would suggest you simplify the page. It is a very good begining but it is a little too complicated at times. No need to specify width of inner divs, since they will always fill up the width of their container minus any margins and padding you specify. Try and work with that.

 

[ChrisHunt]

Like Vrag says, I'd simplify it. IE has a plethora of bugs related to the floating of elements, the more things you float, the more likely you are to be hit! I'd do something like this:

<div id="wrapper">
  <div id="header">
    ...
  </div>
  <div id="col1">
    <div id="welcome"> ... </div>
    <div id="contact"> ... </div>
  </div>
  <div id="col2">
    <div id="artwork"> ... </div>
    <div id="swatches"> ... </div>
  </div>
  <div id="footer"></div>
</div>

Float col1 & col2 to the left, give the footer <div> clear:left, remove the other floats and you should be better off.

Coupla other points while I'm looking...

Making your section headings into background images of their own divs - div#welcome for example - will hide them from visitors that can't see images. Like Google, for example. When you have images like this that contain content for the page, put them in <img> tags with the proper [tt]alt[/tt] text.

Why is all the text on your site contained in <h1> elements? Do you think you're going to get better search engine rankings by pretending that everything on the page is a heading (apart from the actual headings, as noted above)? It's not going to work. In fact, you may get penalised if the robot thinks that a page with umpteen top-level headings and no text looks suspicious.

I'd mark it up something like this:

<div id="swatches">
<h1><img href="Images/swatches.jpg" alt="Swatches" /></h1>
<p>Please click here to view our colour swatches.</p>
<p>Pantone references are displayed which our glass colours will match.</p>
</div>

(Oh, and you'd be better off making images like swatches.jpg as gifs or pngs - you won't get those grainy jpeg artifacts that way)

Rather more than you asked for there, but I hope you find it useful.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[dthomas31uk]

Chris...cheers for that mate..that worked a treat.

Nice one.