15 replies [Last post]
Stewart
Offline
Regular
Dundee, Scotland.
Last seen: 15 years 35 weeks ago
Dundee, Scotland.
Joined: 2003-11-16
Posts: 16
Points: 0

Hi there.

I've searched and couldn't find much on this important problem. The thing is. I am in the process of building my first site and am getting familiar with CSS and would very much like to never deal with tables again. However, I have a few problems that are making me contemplate going back to tables within tables within tables (AARRGhh):

1 - The text I enter into a DIV overflows over its intended perimeter when viewed in Mozilla. If there isn't a solution to this. This means I would need to have different IDs assigned to every coloumn of every page like this I use in order to specify different DIV Heights for the varying content of each page. This kinda contradicts the whole purpose and convenience of using CSS don't you think?

2 - Another Mozilla problem is that for some reason it just doesn't display as it should. My main text area is split into 2 seperate text columns each previously surrounded with borders which were a 1% width blue <TD>. I now use DIVS for this. As you can see from the linked screenshot on my site. The picture I took whilst using Mozilla shows that the main DIV which contains both the text coloumns is smaller than it should be and the nested text DIV is larger than it should be.

3 - I'm also having problems transfering ny Navigation bar over to a tableless layout. It was taken from a site with kind permission for anyone to use and was initially in a vertical list style. After a lot of code manipulation and a nervous breakdown. I managed to get the whole lot fitted into 8 TDs in my old table laiden site. I'm having extreme difficulty doing this with CSS. Every time I add a second button it gets placed below the first one. What can I do to fix this?

Links to my site:

This page shows my old table saturated page design that I'm trying to reproduce with CSS. http://www.gta-jutecity.pwp.blueyonder.co.uk

This is my attempt so far with CSS. There's also a link to a Mozilla screenshot. http://www.gta-jutecity.pwp.blueyonder.co.uk/test.html

I would be ever so grateful for any help or advice with the above problems as they're driving me up the wall.

Stewart.

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

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

The only way to learn is to do it yourself

Stewart
Offline
Regular
Dundee, Scotland.
Last seen: 15 years 35 weeks ago
Dundee, Scotland.
Joined: 2003-11-16
Posts: 16
Points: 0

Thanks but...

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 Crying. 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.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 days 18 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Text container overflow.

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

Stewart
Offline
Regular
Dundee, Scotland.
Last seen: 15 years 35 weeks ago
Dundee, Scotland.
Joined: 2003-11-16
Posts: 16
Points: 0

Thanks for that.

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.

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

Text container overflow.

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

The only way to learn is to do it yourself

Stewart
Offline
Regular
Dundee, Scotland.
Last seen: 15 years 35 weeks ago
Dundee, Scotland.
Joined: 2003-11-16
Posts: 16
Points: 0

Ahhhh!

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 Sad 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:

Quote:
Line ##, column ##: ID "nav" first defined here

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

Quote:

<table class="table">
<tr>
<td id="nav">
<a href="/index.html">Home</a>
</td>
<td id="nav">
<a href="/Jute-City/gta-vice-city.html">Vice City</a>
</td>
<td id="nav">
<a href="/Jute-City/gta-3.html">GTA: III</a>
</td>
<td id="nav">
<a href="/Jute-City/faq.html">FAQ</a>
</td>
<td id="nav">
<a href="/cgi-bin/yabb/YaBB.pl">Forum</a>
</td>
<td id="nav">
<a href="/Jute-City/gangs.html">Gangs</a>
</td>
<td id="nav">
<a href="/zisp/mailer">Email</a>
</td>
<td id="nav">
<a href="/Jute-City/links.html">Links</a>
</td>
</tr>
</table>

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:

Quote:

#nav {
float: left;
list-style: none outside;
width: 89.5px;
padding: 0;
margin: 0 15px 10px 0;
background: #b50;
color: #ffc;
border: solid 1px #930;
font: bold 11px geneva, verdana, sans-serif;
text-align: center;
}

#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 Laughing out loud

Thanks for your kind replies by the way.

Stewart.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 days 18 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Text container overflow.

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

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

Text container overflow.

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

The only way to learn is to do it yourself

Stewart
Offline
Regular
Dundee, Scotland.
Last seen: 15 years 35 weeks ago
Dundee, Scotland.
Joined: 2003-11-16
Posts: 16
Points: 0

Aha !!!!

Hi again Daybreak_0.

You're absolutely correct about the

Quote:
<!-- <![CDATA[
javascript goes here
//]]> -->
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.
Quote:
<script type="text/javascript" src="/java-scripts/jutejava1.js"></script>
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.

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

Text container overflow.

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

The only way to learn is to do it yourself

Stewart
Offline
Regular
Dundee, Scotland.
Last seen: 15 years 35 weeks ago
Dundee, Scotland.
Joined: 2003-11-16
Posts: 16
Points: 0

Slight Problem.

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.

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

Text container overflow.

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

The only way to learn is to do it yourself

Stewart
Offline
Regular
Dundee, Scotland.
Last seen: 15 years 35 weeks ago
Dundee, Scotland.
Joined: 2003-11-16
Posts: 16
Points: 0

Close but yet so far away.

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.

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

Text container overflow.

ok try this

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

The only way to learn is to do it yourself

Stewart
Offline
Regular
Dundee, Scotland.
Last seen: 15 years 35 weeks ago
Dundee, Scotland.
Joined: 2003-11-16
Posts: 16
Points: 0

Truly Unbelievable!

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.