6 replies [Last post]
bkdark
Offline
Regular
Brooklyn
Last seen: 15 years 16 weeks ago
Brooklyn
Joined: 2004-03-29
Posts: 11
Points: 0

My home page displays well on all compatible mac browsers but has a huge margin problem in IE for PC, it looks great in IE 5.2 for Mac which leaves me confused. Any know why this is happening and how I can fix it.

Link to site: http://www.soulatomic.com

link to css: http://www.soulatomic.com/Css/soul.css

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 15 years 35 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

Page Displays on all Mac Browers, Opera, and Fire Fox but...

IE 5.n for a PC and IE 5.2 for Mac are two different products and both have different problems.

You do not seem to have any hacks for the broken box under IE5.n (pc) and also having float problems

See this thread http://www.csscreator.com/css-forum/ftopic3140.html as I just put some links in there for similar problems.

Regards
Day

The only way to learn is to do it yourself

bkdark
Offline
Regular
Brooklyn
Last seen: 15 years 16 weeks ago
Brooklyn
Joined: 2004-03-29
Posts: 11
Points: 0

Page Displays on all Mac Browers, Opera, and Fire Fox but...

Thank you for putting the links, although I don't understand enough to know where to begin. As you may be able to notice the text is pushed all the way down to the bottom of the page. The rest of the margins are rendering correctly as well as the one float item that I have. While the links you provided are usefull, I do not understand where they would apply and how.

If someone could help me undertand my problem a little better I'd greatly appreciate it. Thank you.

Will

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 37 weeks 11 hours ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Page Displays on all Mac Browers, Opera, and Fire Fox but...

Hi

On floats, I have often found you need display:inline on them too, and I see you don't for some.

for your container div, add this code after it:

* html #container {
width: 695px;
w\idth: 675px;
}

for your content div, add this after it:

* html #content {
width: 575px;
w\idth: 565px;
height: 585px;
he\ight: 575px;
}

Your #menu .box and #menu .box2 both have typo's (missing the y off family)

for your #menu .box1, add this after it:

* html #menu .box1 {
width: 81px;
height: 351px;
w\idth: 80px;
he\ight: 350px;
}

That covers the typo's and IE5 box model hacks. It's a start. The links you were given explain what the IE broken box model is (IE 5, in standards mode, which your page is puts borders and padding inside the width and height, not outside, so you need to give it wider/higher widths/heights where padding/border has been used on the same div as height or width). The hacks as written do that, just for IE5.

Trevor

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 15 years 35 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

Page Displays on all Mac Browers, Opera, and Fire Fox but...

When you float boxes you need enough room for their width. If there is not enough room they will be forced down under the other floated boxes.

Because IE has a problem with the box model and other bugs, then the width can be increased beyond what you set, and so your box (content or whatever) is forced down.

You need to add the hacks to fix it for IE

Regards
Day

The only way to learn is to do it yourself

bkdark
Offline
Regular
Brooklyn
Last seen: 15 years 16 weeks ago
Brooklyn
Joined: 2004-03-29
Posts: 11
Points: 0

Page Displays on all Mac Browers, Opera, and Fire Fox but...

Very helpfull thank you both. I wish I was at a level to help others as you are with me. Every question I've ever asked has always received a quick response. Thank you for being supportive.

Will

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 37 weeks 11 hours ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Page Displays on all Mac Browers, Opera, and Fire Fox but...

Hi

The usual problem with IE6 and floats is it adds 3px padding to the right that you can't get rid of, so, lets call that div leftcol, add this css (with hack comments around it) after leftcol's css:

/* \*/* html #leftcol{margin-right:-3px}/* */

And only IE Win will see it.

Trevor