CSS help

Question

m.itch 0 Newbie Poster

13 Years Ago

hey i need some help with my css, on internet explorer it works but on firefox it doesn't. heres the css and html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Four Seasons Cleaning (Super Spring Cleaning).</title>
<meta name="Description" content="FOUR SEASONS CLEANING, powerwashing in the lower mainland, B.C, Canada.">
<meta name="Keywords" content="Power, Washing, Langley, Surrey, Aldergrove, Walnut, Grove, Four, Seasons, Cleaning">
</head>

<style type="text/css">

#nav {
margin:0;
padding:0;
background:  0 0 repeat-x;
float:center;
width:100%;
border:4px solid #000000;
border-width:3px 0;
}

#nav li {
display:inline;
padding:0;
margin:0;
}

#nav a:link,
#nav a:visited {
color:#000;
background:#BDEDFF;
padding:20px 40px 4px 10px;
float:center;
width:237px;
border-right:3px solid #000000;
border-left:3px solid #000000;
text-decoration:none;
font:bold 1em/1em Arial, Helvetica, sans-serif;
text-transform:uppercase;
text-shadow: 2px 2px 2px #555;
}
#nav li:first-child a {
border-left:1px solid #000000;
}
#nav a:hover,
#nav a:focus {
color:#fff;
background:#000000;
}

p { font-family: sans-serif; } 
 
h2 { font-size: 24px; 
    font-style: italic;
}
 



</style>

<body>


<br>

<table width="960" cellspacing="10" cellpadding="0" align="center">
<tr>
    <td><img src="http://fourseasonscleaning.webs.com/images/banner.jpg" alt="fourseasonscleaning"></td>
</tr>



<br>


<table width="960" cellspacing="0" cellpadding="0" align="center">
<tr>
<td>

<ul id="nav">

<li id="nav-home" width="237"><a href="http://fourseasonscleaning.webs.com/index.htm">Home</a></li>
<li id="nav-about"><a href="http://fourseasonscleaning.webs.com/about.htm">About</a></li>
<li id="nav-archive"><a href="http://fourseasonscleaning.webs.com/booking.htm">Booking/Contact</a></li>
<li id="nav-lab"><a href="http://fourseasonscleaning.webs.com/prices.htm">Prices</a></li>
</ul>


</td>
</tr>
</table>

<br>

<br>

<br>

<table width="960" cellspacing="0" cellpadding="0" align="center">
<tr>
 <td>
 </td>
</tr>
</table>

<br>

<br>

<br>


<table width="960" cellspacing="10" cellpadding="0" bgcolor="" align="center">
<tr>
     <td>
<img src="http://fourseasonscleaning.webs.com/images/footer4.jpg" alt="madebymitchschols">     </td>
</tr>
</table>


</table>


</table>


<!-- --><script type="text/javascript" src="http://images.webs.com/static/global/js/webs/usersites/escort.js"></script><script type="text/javascript">if(typeof(urchinTracker)=='function'){_uacct="UA-230305-2";_udn="none";_uff=false;urchinTracker();}</script></body>
</html>

thanks!

html-css web-design

8 Contributors
22 Replies
312 Views
2 Weeks Discussion Span
Latest Post 13 Years Ago Latest Post by pixelsoul

pixelsoul 272 Red Pill

13 Years Ago

You should really explain "doesn't work" part in your description. The vague explanation of the problem is not helpful in giving you an answer. Also I see more than one problem with the html.

drjohn 56 Posting Pro in Training

13 Years Ago

It's usually easy to start testing in firefox, then alter things if necessary to work in IE. But when you say IE, which version are you using?

drjohn 56 Posting Pro in Training

13 Years Ago

Okay, some of the more obvious errors in your code.

There is no such thing as float:center; float is either left or right. So that bit will simply not work. Next, if you'd chosen float;left or float:right, it still would not have worked as you have to set a width of less than 100% for #nav (which you are trying to float:center), otherwise you would see no difference whether or not the float code was used.

So what is happening is that all browsers have some error detection code built in and they then try to guess at the best solution to what you thought you were doing. They detect different errors and correct them in different ways, and Firefox is either not detecting/ignoring these errors or guessing a correction that is .different to IE's guess (remember the code is just wrong, so they have to guess). Or one is ignoring the float code completely and the other is trying to guess what you meant.

Also, you're using text-shadow, which is not supported in IE, but is supported in Firefox (it's css3, and only a few parts of css3 are supported and it varies from browser to browser which bits are supported, but we have high hopes for IE9 supporting some more css3).

Try visiting www.cssbasics.com and www.htmldog.com to learn a bit more about css (which might upset one new member...)

Using tables for layout, incidentally is just soooo last century, literally.
And you have placed some <br> between the table rows - this is illegal coding in html, and may be part of your problems.

and you have one more closing </table> tag than opening <table> tags. so scroll to the end of your source code and look for the very last </table>, just before your javascript at the end, and delete that </table>

Edited 13 Years Ago by drjohn because: n/a

mlm2gether 0 Newbie Poster

13 Years Ago

The latest statistics I can find reveal that Firefox is STILL the most popular browser.

Browser Statistics
Firefox and Internet Explorer are the two most popular browsers.
Browser Statistics Month by Month
2011 Internet Explorer Firefox Chrome Safari Opera
January 26.6 % 42.8% 23.8% 4.0% 2.5%

As Firefox is the most popular you might like to start your development and debugging in that browser. Two add-ons I use are Firebug for defining elements on a page and Web Developer for examining and testing css without the need to make permanent changes before you have it right. The other advantage is if you see what you want on another website it's easy to define the style or HTML used.

SNIP

Edited 13 Years Ago by happygeek because: spam/self promotional links snipped

drjohn 56 Posting Pro in Training

13 Years Ago

Your browser stats look VERY different from those reported by wikipedia or any of the other global sources - you've gone to a techy web site that makes it data available, haven't you? All techy web sites show a distinct bias to firefox that does not translate to the general public.

check a more reliable,less biased source
http://en.wikipedia.org/wiki/Usage_share_of_web_browsers
they include stats from several big sources

Ah, I see where you got your dodgy stats from now - w3schools. A single web site's stats, very biased stats indeed, showing the usage among web designers who think they will learn coding from that source! Not exactly representative of the general public, is it?

However, design and test in firefox, then adjust for IE, is the way most people work.

PS Like you, I strongly recommend Webdeveloper Toolbar

Edited 13 Years Ago by drjohn because: n/a

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

pixelsoul 272 Red Pill Featured Poster · Answer 1 · 2011-02-16T17:25:58+00:00

Internet Explorer is holding a little under 50% market share with browsers right now and has been steadily decreasing over the passed 10 years.

The market share for IE has nothing to do though with designing for Firefox and other browsers first and then correcting the problems found in IE. If you design for Firefox your site will look correct in most browsers with little possible issues and then you can focus and correcting the problems with IE.

If design for IE and then fix problems the other browsers have you will have a much bigger job on your hands. Most "real" front end web developers that are experienced will tell you this.

drjohn 56 Posting Pro in Training · Answer 2 · 2011-02-16T17:39:35+00:00

drjohn 56 Posting Pro in Training

13 Years Ago

totally agree

m.itch 0 Newbie Poster · Answer 3 · 2011-02-16T22:42:28+00:00

my problem is that the nav bar would shrink im assuming something to do with the default settings of the the browser. and by that i mean internet explorer my nav bar would function and look the way i want (width being 960) but when I'd open in firefox it would just go a little wonky, sorry for bein slow on the respond :P

m.itch 0 Newbie Poster · Answer 4 · 2011-02-16T22:48:26+00:00

well honestly im not really that tech savvy i just need a website for my company.

pixelsoul 272 Red Pill Featured Poster · Answer 5 · 2011-02-16T23:55:05+00:00

The problem is it may or may not be a couple things you could change to correct that issue but the biggest problem is you're going to see other problems now or at some point. It is like building a house and having a bad foundation. With a bad foundation the house is unstable.

I am not sure how open you are to learning new stuff. If you plan on going forward developing your own website I would suggest putting some time into learning a couple of the newer methods of web design. You may actually find it is pretty easy once you can wrap your head around it. I think it is more flexible and easier than it used to be back in the days of tables and inline styling.

This is what I would do really quickly if someone asked how to clean up the code you posted.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="Description" content="FOUR SEASONS CLEANING, powerwashing in the lower mainland, B.C, Canada" />
<meta name="Keywords" content="Power, Washing, Langley, Surrey, Aldergrove, Walnut, Grove, Four, Seasons, Cleaning" />

<title>Four Seasons Cleaning (Super Spring Cleaning)</title>

<style type="text/css">
/* reset default browser css styles */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img { 
	border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
	font-style:normal;
	font-weight:normal;
}
ol,ul {
	list-style:none;
}
caption,th {
	text-align:left;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
}
q:before,q:after {
	content:'';
}
abbr,acronym { border:0;
}


/* default styles */
p {
font-family: sans-serif;
line-height:21px;
} 
 
h2 {
font-size: 24px; 
font-style: italic;
line-height:35px;
font-weight:bold;
}


/*class and id styles*/
#header{
background:transparent url('http://fourseasonscleaning.webs.com/images/banner.jpg') no-repeat;
margin: 0 auto;
width:960px;
height:240px;
margin-top:50px;
border:solid 1px;
}

#nav {
display:block;
margin: 0 auto;
margin-top:10px;
margin-bottom:10px;
width:960px;
height:47px;

}

#nav li {
display:inline;
text-align:center;
position:relative;
top:20px;
}

#nav a:link,
#nav a:visited {
color:#000;
background:#BDEDFF;
padding:20px 40px 4px 10px;
border:3px solid #000;
text-decoration:none;
font:bold 1em/1em Arial, Helvetica, sans-serif;
text-transform:uppercase;
}

#nav a:hover,
#nav a:focus {
color:#fff;
background:#000000;
}

#content{margin:0 auto;width:960px;padding:10px 0 20px 0;}

#footer{
margin:0 auto;
width:960px;
height:99px;
background:transparent url('http://fourseasonscleaning.webs.com/images/footer4.jpg') no-repeat;
}
</style>
</head>
<body>

<div id="header"></div>

<ul id="nav">
	<li id="nav-home" width="237"><a href="http://fourseasonscleaning.webs.com/index.htm">Home</a></li>
	<li id="nav-about"><a href="http://fourseasonscleaning.webs.com/about.htm">About</a></li>
	<li id="nav-archive"><a href="http://fourseasonscleaning.webs.com/booking.htm">Booking/Contact</a></li>
	<li id="nav-lab"><a href="http://fourseasonscleaning.webs.com/prices.htm">Prices</a></li>
</ul>

<div id="content">
	<h2>Some sample content</h2>
	<p>This is just some fake content to show you what it might look like when the page does have content.

	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vel enim ligula. Pellentesque sed ipsum eros, quis pellentesque justo. Aenean non mauris sapien, eget sodales justo. Nunc et nibh purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin massa elit, dictum nec lacinia eu, dignissim et elit. Morbi blandit congue enim ut fringilla. Praesent tristique auctor augue, a mattis enim bibendum dictum. Ut molestie accumsan suscipit. Cras id molestie nisi. Maecenas enim diam, egestas ac fringilla tempus, consectetur id sem. Nam mattis leo non justo tempor rutrum. Aenean placerat elit a magna gravida sit amet luctus est volutpat. Mauris elit massa, fringilla ac dignissim ut, lacinia in magna. Vestibulum ante massa, suscipit sit amet condimentum id, rhoncus ut nulla. Donec tempor hendrerit semper. Etiam rhoncus erat vel erat hendrerit facilisis. Sed fermentum mi id elit aliquet at dignissim odio condimentum.
	</p>
</div>


<div id="footer"></div>


<script type="text/javascript" src="http://images.webs.com/static/global/js/webs/usersites/escort.js"></script>
<script type="text/javascript">if(typeof(urchinTracker)=='function'){_uacct="UA-230305-2";_udn="none";_uff=false;urchinTracker();}</script>

</body>
</html>

Now this is by no means where I would have stopped usually but I just wanted to show you a little bit of power using CSS and divs. Another thing I would do is move all the css to an external style sheet.

A suggestion if you don't mind, change your design for your navigation. When you design navigation think "growth". Adding another link to your navigation with the way you had it would cause you to have to go through and do more tweaks to get it to look right. You want to be able to add another navigation button easily with out a bunch of sweat.

Cheers, and good luck :)

m.itch 0 Newbie Poster · Answer 6 · 2011-02-17T00:08:30+00:00

thats so crazy! did you just straight type all that code!? btw thank you!

pixelsoul 272 Red Pill Featured Poster · Answer 7 · 2011-02-17T01:19:08+00:00

I did, I have been doing web development since I was 15. That is just an idea to start you on though. I would take it further than the examples I gave. You can find tutorials all over the internet on web development :)

m.itch 0 Newbie Poster · Answer 8 · 2011-02-17T21:36:42+00:00

yaa i ive been doing it for like a year now and im sixteen, my teachers gona try to get me into a block next year where i can just work with dream weaver and photoshop and that would be so awesome, but for now you know any good websites that have videos to walk you through css??

pixelsoul 272 Red Pill Featured Poster · Answer 9 · 2011-02-17T23:11:28+00:00

Well that is a good age to start. If you like it stick with it because the future is bright for web/application development. I am 32 now and I never regretted messing with this stuff when I was young. Hopefully you will be further along at my age then I am ;)

Here are some good sites to keep bookmarked especially the tutsplus websites. The w3schools website is really good for the basics. I don't know a lot of the real beginner sites as I tend to not go to them much anymore. Just start with trying to do little things and then use them like building blocks later to put a masterpiece together :)

http://www.w3schools.com
http://smashingmagazine.com
http://tympanus.net/codrops
http://tutorialzine.com
http://webdesign.tutsplus.com
http://psd.tutsplus.com
http://net.tutsplus.com

Good luck!

m.itch 0 Newbie Poster · Answer 10 · 2011-02-22T02:49:32+00:00

m.itch 0 Newbie Poster

13 Years Ago

how do i adjust the length of each button?

Arcrammer 0 Newbie Poster · Answer 11 · 2011-02-22T03:09:43+00:00

Do you mind telling exactly what part of your

code

isn't executing properly?

b.wickham 0 Newbie Poster · Answer 12 · 2011-02-22T21:38:22+00:00

CSS positioning and float can get a little tricky, especially if you're new to CSS. You might want to take a look at this to get a better understanding of how to display items in CSS: http://www.wipeout44.com/brain_food/css_staying_afloat.asp.

Going forward, I like the advice from drjohn: "Start testing in firefox, then alter things if necessary to work in IE." This is what I do, too.

pixelsoul 272 Red Pill Featured Poster · Answer 13 · 2011-02-22T21:52:47+00:00

The width of those navigation links is being controlled by the padding on them.

#nav a:link,
#nav a:visited {
color:#000;
background:#BDEDFF;
padding:20px 40px 4px 10px;
border:3px solid #000;
text-decoration:none;
font:bold 1em/1em Arial, Helvetica, sans-serif;
text-transform:uppercase;
}

Changing the padding for right and left will change the width on them.

pixelsoul 272 Red Pill Featured Poster · Answer 14 · 2011-02-22T21:55:43+00:00

CSS positioning and float can get a little tricky, especially if you're new to CSS. You might want to take a look at this to get a better understanding of how to display items in CSS: http://www.wipeout44.com/brain_food/css_staying_afloat.asp.
Going forward, I like the advice from drjohn: "Start testing in firefox, then alter things if necessary to work in IE." This is what I do, too.

And yes, totally agree of course with working in Firefox. I use Firefox with the Web Developer and Firebug extensions for designing in the browser. It works great and saves a ton of time for me on my projects.

cssrichinfo 0 Newbie Poster · Answer 15 · 2011-02-26T16:11:48+00:00

You can manage different style sheets using like this

htmlCoder101 0 Newbie Poster · Answer 16 · 2011-03-01T21:04:49+00:00

it's actually better to make the website work in Firefox first.. this way it is easier to alter the codes to fit the IE browser later..

pixelsoul 272 Red Pill Featured Poster · Answer 17 · 2011-03-01T22:22:51+00:00

There seems to be a very bad echo on this thread :)