Tycoon Talk
Become a Big fish!
The number 1 forum for online business!
Post topics, ask questions, share your knowledge.
Tycoon Talk is part of Freelancer.com - find skilled workers online at a fraction of the cost.

CSS Forum


You are currently viewing our CSS Forum as a guest. Please register to participate.
Login



Reply
Help! Firefox displaying my header very weird!
Old 08-22-2008, 12:48 PM Help! Firefox displaying my header very weird!
Junior Talker

Posts: 4
Trades: 0
Hi guys! I really need some help for a complete CSS newb!



My header is showing correctly in Internet Explorer (weird) and not correctly in Firefox. Usually it's the other way around for me. LOL

So I also went to view my site on a Proxy, and the header shows fine on the proxy, but then the text is all messed up and all the way up to the header.

Here is my source code: Any help would be greatly appreciated guys! I am just learning this.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>.::WellnessWithin.ca::.</title>
<style type="text/css"><!--
body {
background-image: url('images/background.gif');
background-repeat: repeat;
background-attachment: fixed
}
#leftmenu {
float: left;
}
#home {
float: left;
}
#about{
float: left;
}
#services{
float: left;
}
#contact{
float: left;
}
#rightmenu{
float: left;
}
#undermenu{
float: left;
}
#contentpane{
float: left;
}
#testimonials{
float: left;
}
#footerbanner{
float: left;
}
#footergreybruce{
float: left;
}
--></style>
</head>
<body
style="margin: 0px 0px 0pt 80px; font-family: Arial,Helvetica,sans-serif;">
<div id="header"><img src="http://www.webmaster-talk.com/images/HEADER.gif"></div>
<div id="leftmenu"><img src="http://www.webmaster-talk.com/images/LEFTMENU.gif"
class="centered"></div>
<div id="home"><a href="index.php"><img
style="border: 0px solid ; width: 60px; height: 24px;"
alt="--Home--" src="http://www.webmaster-talk.com/images/1HOME.gif" class="centered"></a></div>
<div id="about"><a href="aboutus.php"><img
style="border: 0px solid ; width: 84px; height: 24px;"
alt="--About Us--" src="http://www.webmaster-talk.com/images/2ABOUTUS.gif"
class="centered"></a></div>
<div id="services"><a href="services.php"><img
style="border: 0px solid ; width: 68px; height: 24px;"
alt="--Services--" src="http://www.webmaster-talk.com/images/3SERVICES.gif"
class="centered"></a></div>
<div id="contact"><a href="contactus.php"><img
style="border: 0px solid ; width: 93px; height: 24px;"
alt="--Contact Us--" src="http://www.webmaster-talk.com/images/layout8FINAL_08.gif"
class="centered"></a></div>
<div id="rightmenu"><img src="http://www.webmaster-talk.com/images/RIGHTMENU.gif"
class="centered"></div>
<div id="undermenu"><img src="http://www.webmaster-talk.com/images/UNDERMENU.gif"
class="centered"></div>
<div id="contentpane"><img src="http://www.webmaster-talk.com/images/CONTENTPANE.gif"
class="centered"></div>
<div
style="padding: 1em; position: absolute; left: 85px; top: 180px; height: 400px; width: 415px; font-weight: bold; color: rgb(131, 42, 80);"><big>Welcome
to Wellness Within!<br>
<br>
</big>
<div style="text-align: justify;"><small
style="color: rgb(0, 0, 0); font-weight: normal;">With
a special interest in fertility, pregnancy, postantal, infants,
toddlers and Women's Health we provide a variety of services to
"nourish
life naturally". &nbsp;Whether you are looking to establish or
maintain a nutritionally balanced lifestyle for yourself, baby or
toddler, we have something just right for you.</small><br>
</div>
<br>
</div>
<div id="testimonials"><img
src="http://www.webmaster-talk.com/images/TESTIMONIALSRIGHT.gif" class="centered"></div>
<div id="footerbanner"><img
src="http://www.webmaster-talk.com/images/FOOTERBANNER.gif" class="centered"></div>
<div id="footergreybruce"><img
src="http://www.webmaster-talk.com/images/GREYBRUCE.gif" class="centered"><br>
<br>
<br>
</div>
<br>
<br>
<br>
<br>
</body>
</html>

Last edited by missang24; 08-22-2008 at 04:56 PM..
missang24 is offline
Reply With Quote
View Public Profile
 
 
Register now for full access!
Old 08-22-2008, 01:33 PM Re: Help! Firefox displaying my header very weird!
Junior Talker

Posts: 4
Trades: 0
I just sliced the images into two, and it looks to be working ok.. How about on your guys end? Also is that how I am supposed to be putting the text on the background? I just made that a div as well (the text). Any input would be great!

Okay NEW Problem... And I think it is a BIG one...

When I adjust the screen size / browser size EVERYTHING breaks!

Do I need to make some adjustments to my styles? What about adding position: fixed ???

Im not sure, once again I am just learning all of this.

Last edited by missang24; 08-22-2008 at 01:52 PM..
missang24 is offline
Reply With Quote
View Public Profile
 
Old 08-22-2008, 02:56 PM Re: Help! Firefox displaying my header very weird!
wayfarer07's Avatar
Poo on You

Latest Blog Post:
Introducing WowWindow
Posts: 3,985
Name: Abel Mohler
Location: Asheville, North Carolina USA
Trades: 0
It's doing exactly what you're telling it to. For one thing, you don't need all of those floats, but if you understood the concept of clearing floats, you would be ok.
__________________
Join me on
Please login or register to view this content. Registration is FREE
wayfarer07 is offline
Reply With Quote
View Public Profile Visit wayfarer07's homepage!
 
Old 08-22-2008, 10:33 PM Re: Help! Firefox displaying my header very weird!
thehuskybear's Avatar
Ultra Talker

Posts: 362
Name: Sam
Location: Tucson, AZ
Trades: 1
If you put a container div around all your other divs and give it a fixed width, it will help keep floats inline. However, I would try to restructure your code so you could avoid the floats... I can't see why you have all of the float lefts.

Sam
__________________

Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE
-
Please login or register to view this content. Registration is FREE
thehuskybear is offline
Reply With Quote
View Public Profile Visit thehuskybear's homepage!
 
Old 08-23-2008, 04:12 PM Re: Help! Firefox displaying my header very weird!
LadynRed's Avatar
Defies a Status

Posts: 10,016
Location: Tennessee
Trades: 0
Quote:
My header is showing correctly in Internet Explorer (weird) and not correctly in Firefox
Ummm.. no, IE is showing you what you WANT, not what is correct by the standards - which is what Firefox is showing you.

You need to learn some more about floats. As noted, you don't need all those floats; you must CLEAR floats; and you MUST give a floated element a defined WIDTH. You can't just stick in 'float: left' and expect it to work correctly.

You might want to run thru this tutorial: http://css.maxdesign.com.au/floatutorial/

You likely don't need that position:absolute on your "Welcome" message either.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!

Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE

LadynRed is offline
Reply With Quote
View Public Profile
 
Reply     « Reply to Help! Firefox displaying my header very weird!
 

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off





   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML



Page generated in 0.22554 seconds with 12 queries