FF Issues 1

TamedTech · Mar 11, 2006

Hi Guys,

This is fustrating me now, i've spent a little time trying to correct it but can't.

Take a look here ...

http://www.managementtraining.net/test/4winds/style.cfm

In IE everything is hunky dorey, but open it in the other browsers and it goes all screwy.

Both my HTML and CSS are valid according to W3C so i'm not sure.

Any chance you can take a look and let me know what your thoughts are,

Thanks,

Rob

BillyRayPreachersSon · Mar 11, 2006

There are going to be many ways of doing this. Of the two routes I'd use, one is pure CSS, and one is changing the HTML. The latter option is by far the easiest.

Immediately after the closing div for col2, add this:

Code:

<div style="clear: left;"></div>

Good job on the CSS, by the way - it's well structured. I'd probably reduce the amount of font face definitions... you shouldn't really specify the font like that in all the places you are. That's what the cascading in "CSS" means. So you get to sit back, put your feet up, and let the browser do the work for you

Incidentally, take some time to indent your HTML code. I think it's so much easier to see the structure:

Code:

<body>
	<div id="header">
		<ul id="navigation">
			<li><a href="[URL unfurl="true"]http://www.4windswholesale.com"><span>View[/URL] Site</span></a></li>
			<li><a href="page_master.cfm"><span>Add / Edit / Remove <b>Pages</b></span></a></li>
			<li><a href="product_master.cfm"><span>Add / Edit / Remove <b>Products</b></span></a></li>
			<li><a href="newsletter.cfm"><span>Send Newsletter</span></a></li>
			<li><a href="logout.cfm"><span><b>Log Out</b></span></a></li>
		</ul>
	</div>

	<div id="container">
		<div id="col1">
			<div id="body-content">
				<h1>'4 Winds Administration Pannel'</h1>
				<h2>Site Content Mofifications</h2>
				<p>Welcome to the '4 Winds' site Administration pannel, from this secure section of the site you can modify the majority content of the site without any real technical skills. There is also a minimal risk of you doing any damage, the worst that you can do it remove a page you didnt mean too, and even then, a simple phone call to <a href="[URL unfurl="true"]http://www.tamedtechnology.co.uk">Tamed[/URL] Technology</a> will solve the problem.</p>
				<p>Below are basic instructions on how to Administrationister the '4 Winds' site, but there is plenty of step-by-step adive whilst your progressing through your modification forms. This information will be presented to you in special notice boxes that are highlighted to be iether informations of warnings. These boxes will look a little like this:</p>
				<p class="info">This is an INFORMATION box, it will be listed next to form items to give you a basic desciption of what the form can do, notice the little icon inside the blue circle is an "i" for info, you'll also find noticed with "X" which is a critical warning, this will be for items which will cause a dramatic change to the site.</p>
				<p>All in all you shouldnt have any issues with modifying the site, small content change, add a little news, add promotions and sending newsletter are made easy and are all achievable with just a few clicks of the mouse.</p>
			</div>
		</div>

		<div id="col2">
			<div id="pod">
				<h1>Functions</h1>
				<p>Here we will list all the available functions for your current page, along the top of the Administration pannel you'll notice your key navigaiton</p>
			</div>
		</div>

		[!]<div style="clear: left;"></div>[/!]
	</div>

	<!-- PAGE FOOTER -->
	<div id="commentbar">
		<br>
		<p>
			Developed by <a href="[URL unfurl="true"]http://www.tamedtechnology.co.uk">'Tamed[/URL] Technology'</a> for <a href="[URL unfurl="true"]http://www.4windswholesale.com">'4[/URL] Winds Wholesale B.V'</a> - Copyright &copy; 2006 - Administration Pannel Version 1.0.1 on 24/02/2006
			<br><br>
			<img src="[URL unfurl="true"]http://www.managementtraining.net/test/4winds/css.gif"[/URL] alt="Valid CSS">
			<img src="[URL unfurl="true"]http://www.managementtraining.net/test/4winds/html40.gif"[/URL] alt="Valid HTML 4.01">
		</p>
	</div>
</body>

Hope this helps,
Dan

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

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

[/tt]

BillyRayPreachersSon · Mar 11, 2006

Oops - change that "clear: left" to "clear: [!]both[/!]" - otherwise you'll get problems when col2 extends past col1.

Also, to explain how it works...

"clear: left" tells the div to not allow content to appear floated to its left. Or, to put it another way, it will forcibly appear after content that is floated left.

"clear: right" does the same, but for content floated to the right.

"clear: both" mixes the two.

So the end result? The div will always appear after those two columns. This gives the container height, since it really didn't have any before, and so the border displays correctly.

Dan

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

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

[/tt]

TamedTech · Mar 11, 2006

Thanks for that Dan, you're a star.

Seems to have solved my issue, i did have the template working fine at some point in the past without that additional div, i must have knocked out a class in my CSS somewhere along the line, not to worry.

Thanks for explaining the "clear" stuff, i've seen it used but never really understood it.

Just got to sort my beef with the header navigation going all wonky on the other browsers now, any ideas on whats causing that? i always seem to have problems with horrizontal lists lol.

Thanks,

Rob

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

FF Issues 1

TamedTech

IS-IT--Management

BillyRayPreachersSon

Programmer

BillyRayPreachersSon

Programmer

TamedTech

IS-IT--Management

Similar threads

Part and Inventory Search

Sponsor