15 replies [Last post]
leodavinci
Offline
Regular
Last seen: 15 years 4 weeks ago
Joined: 2006-05-26
Posts: 18
Points: 0

Well, this post is about more than just some differences between the two, but I couldn't think of a better topic name... anyways, thanks for all the help in advance ; ).

I am having my first go at creating a website w/ CSS from the ground up, and am running into some problems.

First off, the page in question is at thetecharmory.com/TTA_HTML.html

Firefox Problem:
1. Scrolling up & down, the Nav bar scrolls down with you. I want this to stay in the same spot. In IE it stays there.

IE Problem:
1. Obviously the positioning is way off... is this due to some weird error of mine? Or is it IE's fault? I developed it in FF, like you all recommend, so IE came as a bit of a shock when I first opened it up lol.

General Problems:
1. I want to create a grey bar (Like the one right below the header) to the right of the nav bar, going down the entire length of the content.

2. I want the bottom of the page to be set off like the top, right, and left are. Like, I want there to always be some of the background to be showing no matter how much content there is.

3. I ran my site through the W3C validator, and fixed what I could, however I am not sure how to fix these 3.

i. Line 33 column 25: document type does not allow element "div" here; missing one of "object", "ins", "del", "map", "button" start-tag.

<h3><div><img src="images/keyboard_placeholder.jpg" alt="Keyboa

The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

ii. Line 33 column 175: end tag for "p" omitted, but OMITTAG NO was specified.

...ed a website? We can help.</span></h3>

You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".

iii. Line 33 column 175: end tag for "div" omitted, but OMITTAG NO was specified.

...ed a website? We can help.</span></h3>

Once again, thanks for all your help. I understand that this is a large post, and any help on any of my questions would be greatly appreciated. Also, if you just have any tips for me that don't necessarily go with my questions, let me know anyways, I want to learn everything I can.

Please be nice though : ) I know I'm a CSS noob : (

leodavinci
Offline
Regular
Last seen: 15 years 4 weeks ago
Joined: 2006-05-26
Posts: 18
Points: 0

FF &amp; IE Discrepancies (Nothing new eh?)

The CSS. I read that HTML had to be disabled for posting code, let me know if that is wrong...

/* CSS Document */

body {margin:0px; padding:0px;
	font-family: Arial,sans-serif;
	color: #333333;
	line-height: 1.166;	
	margin: 0px;
	padding: 0px;
	background: #cccccc url(bg_grad.jpg) fixed;
}
/* Header */
div#header {height:100px;
border-bottom:1px solid #ccd2d2;}
div#header h1 {margin-top:0px}
div#header a {color: #71CF21;
text-decoration: none;
}

div#header a:hover{
	color: #71CF21;
	text-decoration: underline;}

/* PageCell (The White Part) */
#pagecell1 {
	position:absolute;
	top: 18px;
	left: 23px;
	right: 2%;
	width:95.6%;
	background-color: #ffffff;
	height: inherit;
	overflow: hidden
}



/* Navigation Div */

div#nav {position:absolute;

width:150px; left:-16px; top:70px;

padding:.5em 0 0 0; 

margin:22px 0 0 15px;
}

div#nav li {font-weight:bold; font-size:.75em;}



/* Navigation Div Menu */
#menu {display:block; top:153px; left:13px; width:100px; position:fixed; padding:10px; font-weight:bold; color:#fff;}
* html #menu {
	position:relative;
	height: 200px;}

#menu ul {padding:0; margin:0;}
#menu ul li {list-style-type:none; display:block; float:left; width:250px; height:20px;}
#menu ul li a:visited, #menu ul li a {display:block; width:143px; height:20px; text-align:left; text-decoration:none; line-height:20px; color:#71CF21; padding:0 5px 0 0;}
#menu ul li a:hover {background:#75868E; color:white;}
h3 {color:rgb(0,179,0);}
h2 {margin:0; padding:0; font-weight:normal;}
.pad {height:75px;}




/* IE Hack grrrr.... */
* html #menu { margin-left: -23px; }
/* IE7 Hack 
+ html #menu { margin-left: -23px; }
*/

/* Content Div */
div#content 
{margin-left:150px;
top:20px;
padding:.5em 0 0 0;}

/* Feature Styles (Keyboard Picture) */
.feature img{
	float: left;
	padding: 0px 0px 0px 0px;}
	

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 18 weeks 13 hours ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Re: FF &amp; IE Discrepancies (Nothing new eh?)

leodavinci wrote:
W

Firefox Problem:
1. Scrolling up & down, the Nav bar scrolls down with you. I want this to stay in the same spot. In IE it stays there.

As usual Firefox has it right. The element in question (#menu) has been given the rule "position:fixed;" which is supposed to do just what Firefox is doing.

IE as so often gets it wrong and, in fact, simply ignores fixed position.

Your xhtml has several errors in it of the type that can mess up positioning. CSS is predicated upon the assumption that the html or xhtml it is applied to will be valid.

Check with the W3C validator and get that invalid code fixed up. Then we'll have a chance to help.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

leodavinci
Offline
Regular
Last seen: 15 years 4 weeks ago
Joined: 2006-05-26
Posts: 18
Points: 0

FF &amp; IE Discrepancies (Nothing new eh?)

Yeah, I posted about those errors. I fixed the stuff I understood. I don't know how to fix those 3 errors. So telling me to fix the validation isn't a whole lot of help.

edit: K, I changed the fixed to absolute and that is good now. Thanks

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 16 weeks 1 day ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

FF &amp; IE Discrepancies (Nothing new eh?)

leodavinci wrote:
Yeah, I posted about those errors. I fixed the stuff I understood. I don't know how to fix those 3 errors. So telling me to fix the validation isn't a whole lot of help. <snip>

Were you to bring those issues you don't understand to the forum, we could help you. If you simply leave invalid markup in place, we kinda start thinking you're not doing your part.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

leodavinci
Offline
Regular
Last seen: 15 years 4 weeks ago
Joined: 2006-05-26
Posts: 18
Points: 0

FF &amp; IE Discrepancies (Nothing new eh?)

I didn't leave it in on purpose... I had 7 errors, at first and I got it down to 3. These 3 I am not sure what it is telling me to do. I put the errors that I got in the original post... if this forum is ONLY about CSS then I guess I'll find a XHTML forum to help me out with my errors...

i. Line 33 column 25: document type does not allow element "div" here; missing one of "object", "ins", "del", "map", "button" start-tag.

<h3><div><img src="images/keyboard_placeholder.jpg" alt="Keyboa

The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

ii. Line 33 column 175: end tag for "p" omitted, but OMITTAG NO was specified.

...ed a website? We can help.</span></h3>

You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".

iii. Line 33 column 175: end tag for "div" omitted, but OMITTAG NO was specified.

...ed a website? We can help.</span></h3>

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 39 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

FF &amp; IE Discrepancies (Nothing new eh?)

There isn't any html to see the rest of the page ... thats important when it talks about missing closing tags. You have to look back to see what came before.

For the first problem, <h*> elements can only contain "inline" style elements. That means you can't use <div> inside a heading. Use <span> instead. If it needs to behave as a block element, style the span with "display: block;".

leodavinci
Offline
Regular
Last seen: 15 years 4 weeks ago
Joined: 2006-05-26
Posts: 18
Points: 0

FF &amp; IE Discrepancies (Nothing new eh?)

Okay, I got my XHTML validated.

My issue now is that IE is making everything under the header move down by about 5 inches.. My CSS is validated, there are a few warnings, but no errors.

thanks for all your help, you make CSS a lot easier for a noob like me to get into.

leodavinci
Offline
Regular
Last seen: 15 years 4 weeks ago
Joined: 2006-05-26
Posts: 18
Points: 0

FF &amp; IE Discrepancies (Nothing new eh?)

I don't think I've made any significant changes to the CSS, but here is the updated CSS anyways.

/* CSS Document */

body {margin:10px; padding:0px;
	font-family: Arial,sans-serif;
	color: #333333;
	line-height: 1.166em;	
	background: #cccccc url(bg_grad.jpg) fixed;
}
/* Header */
div#header {height:100px;
border-bottom:1px solid #ccd2d2;}
div#header h1 {margin-top:0px}
div#header a {color: #71CF21;
text-decoration: none;
}

div#header a:hover{
	color: #71CF21;
	text-decoration: underline;}

/* PageCell (The White Part) */
#pagecell1 {
	margin: 2%;
	background-color: #ffffff;
	height: inherit;
	overflow: visible
}



/* Navigation Div */

/* Test Nav from Old Site */
#pageNav{
	float: left;
	width:178px;
	padding: 0px;
	background-color: #F5f7f7;
	border-right: 1px solid #cccccc;
	border-bottom: 1px solid #cccccc;
	font: small Verdana,sans-serif;
}
/* End Test */

div#nav {float: left;
width: 100px;

width:150px; 

padding:.5em 0 0 0; 

margin:22px 0 0 15px;  
}

div#nav li {font-weight:bold; font-size:.75em;}



/* Navigation Div Menu */
#menu {display:block; top:153px; left:-9px; width:100px; position:absolute; padding:10px; font-weight:bold; color:#fff;}
* html #menu {
	position:relative;
	height: 200px;}

#menu ul {padding:0; margin:0;}
#menu ul li {list-style-type:none; display:block; float:left; width:250px; height:20px;}
#menu ul li a:visited, #menu ul li a {display:block; width:143px; height:20px; text-align:left; text-decoration:none; line-height:20px; color:#71CF21; padding:0 5px 0 0;}
#menu ul li a:hover {background:#75868E; color:white;}
h3 {color:rgb(0,179,0);}
h2 {margin:0; padding:0; font-weight:normal;}
.pad {height:75px;}




/* IE Hack grrrr.... */
* html #menu { margin-left: 1px; }
/* IE7 Hack 
+ html #menu { margin-left: -23px; }
*/

/* Content Div */
div#content 
{margin-left:100px;
top:20px;
padding:.5em 0 0 0;}

/* Feature Styles (Keyboard Picture) */
.feature img{
	float: left;
	padding: 0px 0px 0px 0px;}

leodavinci
Offline
Regular
Last seen: 15 years 4 weeks ago
Joined: 2006-05-26
Posts: 18
Points: 0

FF &amp; IE Discrepancies (Nothing new eh?)

I re-updated my CSS. I'm still having the problem in IE where it is completely out of position. Also, I am having an issue with my Nav Bar. What is the best way of positioning it?

leodavinci
Offline
Regular
Last seen: 15 years 4 weeks ago
Joined: 2006-05-26
Posts: 18
Points: 0

FF &amp; IE Discrepancies (Nothing new eh?)

Any help? Please? I went back and did what you guys told me to, and am now asking for help. My CSS and XHTML is validated... I'm not sure where to go from here.

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

FF &amp; IE Discrepancies (Nothing new eh?)

Might be best to re-explain what the layout is supposed to be doing what do you want of the #menu div, is it supposed to be vertical on the left ? is the layout two column if so you need to describe a left hand div floated, or is the #menu intended to run across the top. One thing for sure you do not need to be using position absolute to place it.

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

rowand33
Offline
newbie
Last seen: 15 years 4 days ago
Timezone: GMT-5
Joined: 2006-06-23
Posts: 3
Points: 0

FF &amp; IE Discrepancies (Nothing new eh?)

I think once you figure out how you want the menu to look, the problem with positioning in IE will be easier to track down. Right now it's definitely the menu that is pushing the content down in IE.

leodavinci
Offline
Regular
Last seen: 15 years 4 weeks ago
Joined: 2006-05-26
Posts: 18
Points: 0

FF &amp; IE Discrepancies (Nothing new eh?)

Alright, thanks for the replies.

I want the menu running vertically next to the picture of the keyboard and content div. You can take a look at thetecharmory.com to see where I want it positioned.

I had it positioned absolutely before.. then someone told me I shouldn't have positioned it absolutely for some reason, so I took it out. I don't have time/energy to do it tonight, but I think I'll be able to get it back in position tomorrow without to much of a problem.

Thanks once again, I'll be back later with more on the IE problem I'm sure : )

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 13 weeks 4 days ago
Joined: 2004-06-30
Posts: 9674
Points: 810

FF &amp; IE Discrepancies (Nothing new eh?)

For the record, there's a massive topic in How To section about common validation errors. I would know, I wrote it Tongue

Verschwindende wrote:
  • CSS doesn't make pies

leodavinci
Offline
Regular
Last seen: 15 years 4 weeks ago
Joined: 2006-05-26
Posts: 18
Points: 0

FF &amp; IE Discrepancies (Nothing new eh?)

lol, sweet. I could have used that info before I went on a 20 hour Google binge figuring it out Smile (A bit of an exaggeration Tongue )

But seriously, this forum is a great resource for people new to CSS... keep up the great work, I know I'll try to pass on my limited knowledge.