19 replies [Last post]
jasonure
Offline
newbie
Last seen: 10 years 29 weeks ago
Timezone: GMT+10
Joined: 2006-05-11
Posts: 8
Points: 0

Hi there,
This site
threeworlds.com.au
Is fine in i.e. but in Firefox and menus on the left show up with wider module headers.
I have tried everything in my knowledge to fix but have hade no luck.
If anyone can see the issue i'd love to know about it.
Cheers
Jason

DisinfectedBarfbag
DisinfectedBarfbag's picture
Offline
Enthusiast
Kent, UK
Last seen: 9 years 24 weeks ago
Kent, UK
Timezone: GMT+1
Joined: 2005-08-06
Posts: 411
Points: 1

Firefox Issue

I think I've found it. It's in div.moduletable h3 try setting the width smaller, it worked for me locally. I make it 138px. Checked in Opera 8.54, IE6 and Firefox 1.5.0.3

Smile

I see that the page doesn't validate, so is that in the pipeline :?:

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 8 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Firefox Issue

This is what's known as a classic case of divitis:

<div id="top">
			<div>
				<div>
					<span id="logo"></span>
				</div>

			</div>
		</div>
		<div id="middle">
			<div id="middle_2">
				<div id="middle_3">
					<div id="middle_4">
						<div id="navigation">
							<div id="centernav">

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 16 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

Firefox Issue

Shock

Verschwindende wrote:
  • CSS doesn't make pies

jasonure
Offline
newbie
Last seen: 10 years 29 weeks ago
Timezone: GMT+10
Joined: 2006-05-11
Posts: 8
Points: 0

You guys rock

Thanks for the help.
I'll have a go at first suggestion. Not sure what diviets are?? Any clues?

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 8 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Firefox Issue

It means you've got way too many divs.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

jasonure
Offline
newbie
Last seen: 10 years 29 weeks ago
Timezone: GMT+10
Joined: 2006-05-11
Posts: 8
Points: 0

I know nothing

The only way i get sites to do what i want is to try something. If it works keep it, if it doesn't try something new...
Not the best way really is it. .. .

Any good reads you know of.
I take it i can delete those div tags with nothing in them.
Do they actually do anything good or bad to the site or is it just messy?

Also i tried the top suggestion however it doesn't give the results i'm after.
The site in i.e. looks how i want it to look.
In firefox the menu items on the left come up short from the module heading. The ones at the top in latest news go off the page. ???
It's got me buggered.... : (

ANy help or good books would be great.
Cheers

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 8 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Re: I know nothing

jasonure wrote:
I take it i can delete those div tags with nothing in them. Do they actually do anything good or bad to the site or is it just messy?

If they're empty and you're not doing anything with them in the CSS then they don't need to be there. The only thing bad that will happen will be if you delete something you are actually using or delete the wrong number of closing tags. But really, a tidy up of your code is in order. The snippet I posted above really has far too many nested elements that don't appear to be doing anything.

As for your problem, try removing padding-right: 12px from div.moduletable h3.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

jasonure
Offline
newbie
Last seen: 10 years 29 weeks ago
Timezone: GMT+10
Joined: 2006-05-11
Posts: 8
Points: 0

ok

Man you know how to read this stuff hey!.
That works a treat in firefox (12px padding) but leaves the headers sticking out i.e. ??

This is i.e. without the 12px padding.

Still the heading on popular news sticks out on firefox, but not on i.e.

jasonure
Offline
newbie
Last seen: 10 years 29 weeks ago
Timezone: GMT+10
Joined: 2006-05-11
Posts: 8
Points: 0

got rid of the top

Got rid of the top heading being too long, however i can get it to have a white gap between with out going of the page in firefox.
Still getting there though.

addition.... I just figured this bit out.

So it is just those left menu ones.

DisinfectedBarfbag
DisinfectedBarfbag's picture
Offline
Enthusiast
Kent, UK
Last seen: 9 years 24 weeks ago
Kent, UK
Timezone: GMT+1
Joined: 2005-08-06
Posts: 411
Points: 1

Firefox Issue

If you re-read my post above you will see that I tested it in fx, ie and opera and they all displayed it right. I have just tried Tyssen's method and it doesn't.

So I'll let you decide

jasonure
Offline
newbie
Last seen: 10 years 29 weeks ago
Timezone: GMT+10
Joined: 2006-05-11
Posts: 8
Points: 0

Firefox Issue

DisinfectedBarfbag wrote:
If you re-read my post above you will see that I tested it in fx, ie and opera and they all displayed it right. I have just tried Tyssen's method and it doesn't.

I've adjusted the css, just the way you suggested.
It is just like the picture above in i.e.
Firefox looks great though.

Are you sure you tested it?? Smile

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 8 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Firefox Issue

jasonure wrote:
DisinfectedBarfbag wrote:
If you re-read my post above you will see that I tested it in fx, ie and opera and they all displayed it right. I have just tried Tyssen's method and it doesn't.

I've adjusted the css, just the way you suggested.
It is just like the picture above in i.e.
Firefox looks great though.

Are you sure you tested it?? Smile
I've just tested it again and it doesn't work in IE. Unfortunately, you've got so much going on that I haven't been able to figure out how to fix it. A good start though would be to remove all of this from above each menu:

<!--(c) Infinity Menus For Mambo - Guy Thomas 2005  -->

 <!-- START OF MODULE 'Mygosu Menus'   -->
<!--File to check for is /home/three/public_html/life/modules/infinity_menus/css/dropdown/academic.css-->		<script type='text/javascript'>
		<!--
		function importStyleSheet(shtName){
			// add style sheet via javascript
			var link = document.createElement( 'link' );
			link.setAttribute( 'href', shtName );
			link.setAttribute( 'type', 'text/css' );
			link.setAttribute( 'rel', 'stylesheet' );			
			var head = document.getElementsByTagName('head').item(0);
			head.appendChild(link);
		}
		-->
		</script>

				
			<!--<link rel="stylesheet" type="text/css" href="http://www.threeworlds.com.au/life/modules/infinity_menus/css/dropdown/academic.css" /> -->
			<script type='text/javascript'>
			<!--
				importStyleSheet('http://www.threeworlds.com.au/life/modules/infinity_menus/css/dropdown/academic.css');
			-->
			</script>
			<!--CSS file exists (/home/three/public_html/life/modules/infinity_menus/css/dropdown/academic.css)-->

You shouldn't be linking stylesheets from the body of your HTML.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

jasonure
Offline
newbie
Last seen: 10 years 29 weeks ago
Timezone: GMT+10
Joined: 2006-05-11
Posts: 8
Points: 0

Firefox Issue

This is refering to the css for the menus, which are the bits under the module header.
The menu is an addon in mambo that allows for those fancy menus without any coding on my part, apart from colouring them.

I only wish to know more about it all, however i'm a bit of a hack at the moment.

So removing this from the html would render those menus invalid.

Any other work arounds for now???

I'll endevour to work out what i'm doing soon. Was thinking to read a few books or something...

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 8 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Firefox Issue

It won't render the menus invalid. You link the stylesheet in the head of your document once along with your main stylesheet. You don't need to link to it more than once for each menu as you've done and the link shouldn't go in the body (and I don't really understand why they've used javascript to do it either).

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

DisinfectedBarfbag
DisinfectedBarfbag's picture
Offline
Enthusiast
Kent, UK
Last seen: 9 years 24 weeks ago
Kent, UK
Timezone: GMT+1
Joined: 2005-08-06
Posts: 411
Points: 1

Firefox Issue

jasonure wrote:
DisinfectedBarfbag wrote:
If you re-read my post above you will see that I tested it in fx, ie and opera and they all displayed it right. I have just tried Tyssen's method and it doesn't.

I've adjusted the css, just the way you suggested.
It is just like the picture above in i.e.
Firefox looks great though.

Are you sure you tested it?? Smile

I tested the code from [url]www.threeworlds.com.au [/url] and the results I posted were from that code after I had made the alterations.

I've just done the same again and here are some screengrabs for it.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 8 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Firefox Issue

Well I don't know what you're doing because this is what it looks like in IE with the code as you suggested:

div.moduletable h3 {
    font-size: 12px;
	margin-right: -7px;
	height: 20px;
    width: 138px;
	font-weight: normal;
	text-indent: 8px;
    padding-top: 2px;
    padding-right: 12px;
	background: #000;
    color: #ff9900;
list-style-type: none;
}

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

DisinfectedBarfbag
DisinfectedBarfbag's picture
Offline
Enthusiast
Kent, UK
Last seen: 9 years 24 weeks ago
Kent, UK
Timezone: GMT+1
Joined: 2005-08-06
Posts: 411
Points: 1

Firefox Issue

Unless the code on the page has changed something else since the other updates.

EDIT: I used the following code, you can see it's the same as your's.

div.moduletable h3 {
    font-size: 12px;
	margin-right: -7px;
	height: 20px;
    width: 138px;
	font-weight: normal;
	text-indent: 8px;
    padding-top: 2px;
    padding-right: 12px;
	background: #000;
    color: #ff9900;
list-style-type: none;

}

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Firefox Issue

Smile this thread reads as though it's starting to descend into the abbys of confusion.

Jason out of interest why did you post this in 'Site Checks' site checks is specifically for finished sites to be appraised and checked

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

DisinfectedBarfbag
DisinfectedBarfbag's picture
Offline
Enthusiast
Kent, UK
Last seen: 9 years 24 weeks ago
Kent, UK
Timezone: GMT+1
Joined: 2005-08-06
Posts: 411
Points: 1

Firefox Issue

Quote:
this thread reads as though it's starting to descend into the abbys of confusion.