Problem with height in different browsers

[dthomas31uk]

Hi, Am creating a website and have come accross a problem with the height in two different browsers.

In firefox, my site is working perfectly...its great, but yet again in crappy IE6 its out.....

Not sure if it the box model problem, but have tried to check everything but to still no avail.

The tags I have used for the column concerned are

#TextHealing {
float:left;
margin:0px;
padding:0px;
background-color: #999999;
width:593px;
}


#TextHealing2 {
float:left;
margin:0px;
padding:0px;
background-color: #999999;
width:593px;
height: 188px;
}

* html #TextHealing2 {height: 180px;}

Have used a hack for IE6 above, but still not sure.

Here is the link to the site

http://www.heraldicpottery.co.uk/Healing/Healing.html

and here is the css

http://www.heraldicpottery.co.uk/Healing/SpiritStyle.css

 

[BillyRayPreachersSon]

but yet again in crappy IE6 its out.

Aah yes - another "It must be IE that is bad, and I'm not even going to entertain the idea of my coding being shoddy" post.

For starters, you should remove the "<!--" from your CSS file. It is not valid CSS, and should not be there. It is possible that that alone could have some knock-on effect.

Dan


[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[cLFlaVA]

and while you're at it:

html [&raquo;]

http://validator.w3.org/check?uri=http://www.heraldicpottery.co.uk/Healing/Healing.html

css [&raquo;]

http://jigsaw.w3.org/css-validator/....co.uk/Healing/SpiritStyle.css&usermedium=all

*cLFlaVA
----------------------------
[tt]your mom goes to college[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[Vragabond]

To join in on the bashing, I would like to add that the way you are doing this is less than intuitive. I change the size of the font in FF, your design breaks. I don't have the same font installed, your design breaks. Smaller text breaks it, bigger text breaks it. You have the wrapper element which runs down both floated elements -- use that to apply background color. Again, you cannot expect from two browsers and two OSes to render a box full of text in exactly the same pixel perfect fashion.

 

[dthomas31uk]

Have just validated both css and html and they are validated correctly.

Still the same problem

 

[dthomas31uk]

Have got it sorted by placing the following hack in as below

#TextHealing2 {
float:left;
margin:0px;
padding:0px;
background-color: #999999;
width:593px;
height: 188px;
overflow:hidden;
}

* html #TextHealing2{height: 179px;}

 

[ChrisHunt]

IE6 and FF both look the same to me. Did you fix it?

However, Vrag's right about it breaking when you change the text size. It would be better to make that whole grey area a single <div>, then either float or background-image the picture on the left. Here's a background image approach, html first...

<div id="main">
<h1><img src="Images/HeaderTop.jpg" alt="Longton Spiritualist Church - Spiritual Healing" /></h1>
<p>
Spiritualist Healing requires no faith or belief whatsover on the part of the person seeking it...
</p>
  -- remainder of RHS content here --
</div>

Now the CSS (untested, but close enough):

#main {
   width: 540px;
   padding: 30px 30px 30px 200px;
   background: #999 url(Images/Montage2new.jpg) center left no-repeat;
   min-height: 565px;
}

* html #main { height: 565px; }

I don't know if you're putting all your body text into <hn> elements in the hope of getting some SEO advantage. If so, it won't work, and may have a negative effect. Just use the right tags for the right things, i.e. <p> for paragraphs of text. You should also use <img> tags in your HTML instead of background images, when the image conveys actual content rather than being purely decorative.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[jstreich]

It's rather fun to change text sizes on that site... I'd consider fixing this bug, if I were you.

[plug=shameless]

http://game-master.us/phpx-3.4.0/

[/plug]

 

[dthomas31uk]

Yeah, Suppose you are right with the <h1> tags. have exhausted them out, will change them to <p> tags. Cheers for your advice folks.

Chris. See what you mean about the image on the left, but feel that I have more control positioning the left image within a column on its own because I can position it better..i.e margins around the image etc.

Have taken you advice about placing the image in the actual html script tho'

Once again Cheers