mac splitting spans instead of placing them together 1

[smeyer56]

In IE6, I have the code working great.
<code>

<div class=&quot;topBar&quot;>
<span class=&quot;logo&quot;><img name=&quot;WCLogo&quot; src=&quot;../images/WC% 20Logo.gif&quot; width=&quot;70&quot; height=&quot;83&quot; alt=&quot;&quot; /></span>
<span class=&quot;header&quot;>insert text here</span>
</div>

</code>

should look like:
logo text

problem is that when viewed in Mac IE5.2 the spans are split and on separate &quot;rows&quot; like this:
logo
text

any ideas why and how to fix it.
I need to design for both because or marketing dept uses Macs.

CSS for this is
<code>
body {
width: 800px;
height: 100%;
margin: 0px;

}

.topBar {
height: 105px;
width: 800px;
font-size: 21px;
font-weight: bold;
}

.logo {
background-color: #000000;
border-right-width: 4px;
border-right-style: solid;
border-right-color: #990000;
height: 105px;
width: 105px;
float: left;
border-bottom-width: 4px;
border-bottom-style: solid;
border-bottom-color: #990000;
}

.header {
font-size: 20px;
text-indent: 20pt;
float: right;
height: 105px;
font-weight: bold;
background-color: #000000;
border-bottom-width: 4px;
border-bottom-style: solid;
border-bottom-color: #990000;
color: #FFFFFF;
width: 695px;
padding-top: 50px;
margin: 0px;
}
</code>

 

[smeyer56]

This is also screwed up in Netscape but that is because Netscape seems to add the border after the left span so the width ends up being 109 w/ IE6 the total width is 105

 

[BillyRayPreachersSon]

smeyer,

Unfortunately, the latest Mac version of IE available to me under MacOs 9.2.2 is v5.1.7, so I am unable to test in 5.2.

However, in 5.1.7, all works fine.

Can you humour me, and try removing the line break inbetween your two span tags, thus:

<span class=&quot;logo&quot;></span>&quot;><img name=&quot;WCLogo&quot; src=&quot;../images/WC%20Logo.gif&quot; width=&quot;70&quot; height=&quot;83&quot; alt=&quot;&quot; /><span class=&quot;header&quot;>insert text here</span>

I realise it shouldn't make a difference, but so many times these things are never addressed by the browser manufacturers.

Dan

 

[smeyer56]

did not make a difference

 

[philote]

This is because of a known bug in IE. Here's an explanation and workaround:

http://www.tantek.com/CSS/Examples/boxmodelhack.html

 

[smeyer56]

Thank you philote for the link it solved the problem on one line I am having a problem and cannot seems to solve it. The &quot;header&quot; lines up perfectly in Mac IE but the &quot;Content&quot; doesn't. It is still located to the right of where it should be. Could someone look at this and let me know if you see something.

Thanks

 

[smeyer56]

A URL would help wouldn't it.

http://www.willowcreekconcrete.com/index2.htm

 

[philote]

Looks correct to me in both IE6 and Mozilla 1.5.

 

[smeyer56]

Sorry, again only a Mac problem.

 

[BillyRayPreachersSon]

smeyer,

To solve your problem, add

clear:left;

to the CSS definition for the &quot;content&quot; class.

By the way - why are you still using FONT tags if you're working with CSS? You also need to escape your HTML characters such as

&

into

&

Hope this helps!

Dan

 

[BillyRayPreachersSon]

Erm.. I meant escape & into

&

amp; ;o)

Dan

 

[smeyer56]

Added clear:left and it still doesn't solve the problem. As for the font tags. I have had someone from our marketing dept. looking over my shoulder asking for changes and it is alot easier to highlight and change than to change the css. I am going to clean it up when they have decided on the final design for fonts.

 

[BillyRayPreachersSon]

smeyer,

Found the solution ;o)

As well as the clear:left in the content CSS, you need remove all whitespace between lines 20 and 21. In other words, line 20 should read:

</span><span>

And then it will work as expected. For a demo, point your browser at:

http://www.soterm.com/dan/maccsstest/index2.htm

Hope this helps!

Dan

 

[smeyer56]

I don't quite understand but when I run your page it works fine on the MAC but if I copy the code and run it again it does not. Would you please send me your CSS, something must be different.

 

[BillyRayPreachersSon]

You can download it yourself:

http://www.soterm.com/dan/maccsstest/style/main.css

Dan

 

[BillyRayPreachersSon]

As far as I can tell, the only difference (as you've changed your CSS now) was that I removed a duplicate property (width) from the &quot;sideBar&quot; definition.

You seem to have this in more than once place, too - the &quot;header&quot; CSS has it, too, and maybe others.

Dan

 

[smeyer56]

The duplicate was there to fix the span issue earlier and it worked when added to the logo and header.

But whatever you did it works extremely well!

I thank you very, very, very much.

 

[BillyRayPreachersSon]

Anytime ;o)

Dan