Text container overflow.

Same problem and solution here http://www.csscreator.com/css-node/707

Problem occurs due to Mozilla correctly keeping the div to the height you specified, and IE incorrectly expanding past your fixed height, and IE not supporting Min-height.

Regards
Day

Thanks for your reply Daybreak_0.

Setting the height for my main container to 'min-height' did the trick for the Mozilla problem. However, it made my middle border in IE 6 disappear and I can't for the life of me get it back no matter how I move things around.

Anyway. I've just realised what is likely to be my biggest mistake (not browser specific I have to say). In the 2 text columns on my page. I decided to make the left column the main container and just stuck the right one on top of this. I did this because all my pages have a greater height of text content in the left column than they do on the right. However, I just realised (thick or what?) that my text in the left column goes under my right column of text . I then had the bright idea of adding about 30% worth of padding to the right side of my left column to alleviate this but this padding also applies to the thick blue border frame with is nested at the base of my main text container and shortens the width of this.

It therefore looks as though I'm gonna have to come up with a more simplified site design to avoid these problems. You wouldn't beleive the amount of time I've spent on this. It may even lead to tables (using lots of CSS to format them).

Thanks again Daybreak_0

Stewart.

Hi Stewart,
First thing you should look at doing is having a standards mode doctype.
There are articles in the Useful CSS Links that explain which to use better then I can.
You'll then find it easier to work with IE and Netscape for example and get similar result.

Hope that helps

Thanks Tony.

I'll check that out. However, it looks a bit complicated. I guess I'll just have to get on with it and learn.

Thanks again.

Stewart.

Stewart it is not really complicated -

Transitional HTML - allows old style tags that are being replaced or depreciated like <font>

Strict Html - does not allow the old tags

Transitional Xhtml allows you to use tags in the html Body or header, and or in a Stylesheet. (Not clear whether older tags are supported or not, but do not think so).

Strict Xhtml (my favourite) does not allow any styling in the html document - must be all in the stylesheet.

The only problem is that the browser will not be as lenient to you, so some of the things you thought were working perfectly will need to be fixed.

And different browsers do different things, but that has been going on for ever anyway, and some don't care where you put the styling.

I would start of with Transitional XHTML. It sure helps you learn more things.

Day

Hi again Daybreak_0.

I've just after re-built my page as an experiment still using tables but with the <table> and <td> tags all using 'classes' assigned to them using CSS. This was the allure of CSS to me in the first place. The convenience of being able to merely alter a couple of lines of text and drastically change my whole site. I'll get back to a tableless layout eventually. However, I think that may be impossible with my current page layout.

As for XHTML 1.0 Transitional. I validated my above page and got 192 errors and couldn't believe it. I knew I had a few dodgy <centers> and <blinks> in there but mananged to figure out all the other stuff such as changing <br> to <br /> etc... However, the validation threw up all the scripting contained in my javascript fader. Am I to just ignore this since that it's Javascript and not XHTML?

Another problem I had was my Nav Bar. The CSS code for this was taken by kind permission from a site but was in a vertical list style. I previously managed to get it into <td>s and transform it into a horizontal Nav Bar which you can see here: http://www.gta-jutecity.pwp.blueyonder.co.uk However, after trying to validate my XHTML. The following link is the nearest I've come to getting it. It looks okayish in IE6 but sucks in Mozilla. Mozilla tends to position the buttons to the left slighlty and takes away the rollover effect. You can see the result here: http://www.gta-jutecity.pwp.blueyonder.co.uk/test3.html The XHTML is still invalid by the way. Apparently, It tells me that:

I'm completely stumped. Every line like this seems to be invalid. Here's my XHTML:

Does anyone know how to get this valid so that it'll look the same in Mozilla? Nothing I do below seems to make a difference.

The CSS code I used for this was:

#nav {
padding: 0;
margin: 0;
border: none;
display: block;
font: bold 11px geneva, verdana, sans-serif;
text-align: center;
}

#nav a {
display: block;
padding: 3px;
margin: 0;
background: #328CF0;
color: #000000;
border-top: solid 0px #d60;
border-bottom: solid 0px #930;
font: bold 11px geneva, verdana, sans-serif;
text-decoration: none;
}

#nav a:hover {
background: #F9B5F2;
color: #000000;
border-top: solid 0px #d60;
border-bottom: solid 0px #930;
font: bold 11px geneva, verdana, sans-serif;
text-decoration: none;
}

#nav a:active {
background: #328CF0;
color: #000000;
border-top: solid 0px #d60;
border-bottom: solid 0px #630;
font: bold 11px geneva, verdana, sans-serif;
text-decoration: none;
}

Another thing. The blue title bar at the top of my page with the text 'Jute City Networks' written over it is roughly 3 times the thickness in Mozilla than when viewed in IE6. I guess I'm asking. Will Mozilla interpret my eventual valid XHTML as I've written it or will it suit itself what to show because this is a major pain as I'm sure I'm becoming

Thanks for your kind replies by the way.

Stewart.

Hi Stewart,
Id's should be unique for the page, only one id="nav" allowed. Why not use class="nav" instead then change your CSS from #nav to .nav

Browsers all have slightly different ways of interpreting font sizes. You should try to design the site with as much flexibility as possible so if a browser or user chooses to display the fonts larger it wont cause any problems.

In web design there are many unknown variables don't send yourself crazy trying to get the page looking exactly the same for every browser/ platform/ user/ device, just try to get it looking good but not identical in your main target browsers and readable in others, you'll stay younger longer.

Hope that helps

Stewart

As Tony said should only have one ID of same name for a page, but class can be used several times.... An example of where the Browser does not care, but validator does.

Not being a javascript man - can't help that much.

A DCElliot from another forum advised me that the javascript has to be wrapped in a CDATA construct something like this.

<script type="text/javascript">
<!-- <![CDATA[
         javascript goes here
//]]> -->
</script>

I usually manage to waddle through my own validation, and as yet have not found out how this exactly works no matter how much I search - hate that. I notice that many just put

<script type="text/javascript">
<!-- 
         javascript goes here
// -->
</script>

If any know how it works and why.....Thanks

Regards
Day

Hi again Daybreak_0.

You're absolutely correct about the

trick working in your HTML code. However, I see your point about the good old fashioned <!-- comment --> working. I never tried this as I expect your browser would then also ignore the Javascript along with the validation. I found an even better way to do it. Externally linking a .js file to my webpages. This means I can alter my fader once and have it take effect all over my site. Never thought of that before.

Now the tricky stuff. The Mozilla issue. I now know the thing which is causing my header to grow to 3 times it's intended thickness. It's caused by my Doc-Type Decleration of XHTML Transitional 1.0. If I cut this from the HTML. It looks the way it's supposed to. I thought this XHTML was gonna benefit me?? What do you think I should do? It's the last peice of the puzzle. Should I:

A - Just except that Mozilla browsers will see a god-awful sight when they visit?

B - Get rid of the XHTML Transitional 1.0 doc type decleration from my pages?

C - Take all my clothes off and run into the sunset and join a travelling circus (joke).

Do you have any suggestions on what could be done here? [Edit] Here's the link: http://www.gta-jutecity.pwp.blueyonder.co.uk/test4.html [End Edit]

Regards.

Stewart.

Yes javascript is better as attached, but sometimes you have to have it in the body.

Removing the DOC type makes all browser treat your page as old and they go to quirky mode. It means you can not control how it may appear now and into the future, as each browser has there own quirky mode.

a) no fix it!! see notes below

b) Better to leave.

c) We have an add here in Aust where a Norwegian wearing just a towel goes to a sauna located in the snow which happens to be filled with good looking women. He says something enticing and they all run outside giggling and jump into a spa without their towels. He also runs out into the COLD air and thinks this is his lucky day, so rips away his towel to jump into spa. Unfortunately the cold did its work and all the women have dissapointed looks on their face.
ummm Its cold in Scotland - could be embarrassing.
-------------------------------------------

Ok had a quick look at your codeand think I can see the problem. It is to do with the different ways IE and Moz treat the % width.

You are centering everthing in the body but leaving the body as the container and not using a new container to hold everything. You are then controlling size by % which works differently in IE and Mozilla.

To fix - Around all of your code place a container, being of fixed width say 550px as below. add a border to it so you can see what is happening.

<body>
<container>
current code you have
</container>
</body>

Add borders to all divs so you can see them in action.

Now go and set all widths based on px not %'s. Start of with 400px width to get the ball rolling, and expand from there.

Now look out for this - In IE if something is set as a fixed width, but the content is larger than fixed width, IE will exand to cater for it. Moz will not. Make sure the width of content is smaller than width of container.

Of course you don't get a fluid layout, but I think you are trying to cater for 800*600 resolutions, and also have the content in middle of screen.

Good luck
Day

Hi again Daybreak_0.

Cheers for the info but as I stated above (somewhere) I gave up on a tableless layout using DIVs a few days ago. I've resorted back to tables until I have more time to design a new workable tableless layout. Your answer above pertains to DIVs does it not?

Anyway. The thing is. I'm now styling my tables using CSS which will be advantageous to me when changing the appearance of things with minimum fuss.

I did, however, take the validation advice and have converted to using XHTML Transitional 1.0. My problem is still the daft big titlebar in Mozilla which I suspect has nothing to do with width % or px. Here's the offending page: http://www.gta-jutecity.pwp.blueyonder.co.uk/test4.html Here's a pic for you in case you don't use Mozilla: http://www.gta-jutecity.pwp.blueyonder.co.uk/mozilla.jpg

However, If I do ONE of the following:

A - Get rid of the XHTML Transitional 1.0 Doc-Type Decleration; OR

B - Change the text in my <td class="tdtitle"> from a <p class="title"> to the good old <font face="tahoma size="4"> tag I used to use.

I manage to get what I'm looking for. Which is this: http://www.gta-jutecity.pwp.blueyonder.co.uk/test3.html

Could you explain how I could alter my CSS file (line height, line spacing etc...) or anything else for that specific paragraph .title class I'm using as I don't want to use the invalid <font> tags to get what I want.

Sorry dude. I should have been more clear in my last post.

Regards.

Stewart.

Ahh ok In your CSS you are using font sizes in pts 12pt - try 12px.

Mozilla would see that as a printing font. 12 pt = 16px and the line height would be adjusted accordingly. IE is incorrectly or more leniently assuming the old style.

FYI

pt/0.75 = px

10pt ~ 13px
12pt ~ 16px

Regards
Day

Hi again Daybreak_0.

That worked ever so slightly as I was already aware there was a slight correlation between the font size and the thick bar size: http://www.gta-jutecity.pwp.blueyonder.co.uk/test4.html The effect of changing from a 12pt to a 12px font size had a slight effect but I'm afraid my text would be unreadable if I were to get the thickness of the bar down. I would have to use a 3px font size to achieve this and this would make the thickness of the bar in IE6 a thin blue line.

Could it be a line spacing problem? Also. Is there any other way to define a textual element without using <p> or <h> tags or is this impossible?

Regards.

Stewart.

ok try this

.title{ color: #000000; font-weight: normal; font-size: 15px; text-align: center;
font-family: tahoma; margin: 0px; padding: 9px; height: 30px}

Hey Daybreak_0.

You're a genius. I can't believe my problem's fixed now. I never thought it would work but You did it.

I would like to take this opportunity to express my gratitude and thank you very much for all your help. I would also like to thank Tony for his useful input as well (this is beginning to sound like an oscar award speech).

What a great Forum!

I will no longer need to undress and run into the sunset in chilly Scotland and dissapoint the girlies :oops:

Thanks Again!

Stewart.