CSS - Gap Difference Between Ie And Firefox

I created a CSS box where there's a header image & a css box under it, having 3 sides (no top border). It looks good in firefox, but can't get the box to close all the way (by meeting the header image) in explorer. There's a 2-3 px space there.

li'l help please?

I've quickly created a small website for a friend of mine and it's the first time I've used <div> and <span> tags. It probably shows , because now it's a mixture of all kinds of layout methods. But anyway, it works fine in IE (what a lovely tolerant browser) but it messes up in Firefox.
Have a look he www.duikeninegypte.nl

The block text in the left column in the middel shows up fine in IE but is moved to the right in Firefox. Both pieces of text are defined in another file, so here it concerns the left part (_HOMEDUUR) and the middle part (_HOMEBODY). Why does it work in IE but not in Firefox?

Cheers for any feedback!
Gurt

PHP Code:
echo " <center><div id=\"backholder\" style=\"position: relative; height: 576px; width: 720px;\"> ";
// background image
echo " <IMG SRC=\"images/homeback.jpg\" style=\"position:absolute; left:0; top:0;\" border=\"0\" title=\"\"> ";
//start navigation menu
echo " <IMG SRC=\"images/nav-home-sel.gif\" style=\"position:absolute; left:5; top:10;\" border=\"0\" title=\"\"> ";
echo " <a href=\"inhoud.php\"><IMG SRC=\"images/nav-inhoud-def.gif\" style=\"position:absolute; left:5; top:70;\" border=\"0\" title=\"\"></a> ";
echo " <a href=\"bestel.php\"><IMG SRC=\"images/nav-bestel-def.gif\" style=\"position:absolute; left:5; top:130;\" border=\"0\" title=\"\"></a> ";
// end navigation

// left panel
echo " <span style=\"position: absolute; left: 20; top: 190;\"> ";
echo " <table width=\"200\" border=\"0\"><tr><td width=\"100%\"><font color=\"#ffffff\">"._HOMEDUUR."</font></td></tr></table> ";
echo " </span> ";

// body panel
echo " <span style=\"position: absolute; left: 235px; top: 90px;\"> ";
echo " <table width=\"480\" border=\"0\"><tr><td width=\"100%\">"._HOMEBODY."<br><br>"._HOMECREDITS."</td></tr></table> ";
echo " </span> ";

echo " </div></center> "; 

What is the difference between these two:

.itemBox

#itemBox

I'm trying to figure out what the difference is between these variables.

Hi!

What is the difference between these two snippets of code?

<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>

and

<ol>
<li>...</li>
<li>...</li>
<li>...</li>
</ol>



I know ul stands for unordered list and ol for ordered list but the two examples above are the same, right?

hi,

i was studying how to make layouts in css and was recommended to read this website

http://www.thenoodleincident.com/tutorials/box_lesson/basic4.html

I learned a new thing from this, to use TOP, LEFT and RIGHT, for side bars. I used to use clear:both and float:left to make similar layout before.

anyway, i was facing a problem with one of my recent practice work where the same padding, height, margin shows different height of the div. Even this website has this problem. If you open the same in FF and IE together and see both closely you will see the difference height and width of divs, especially left. In FF it is more than IE.

how can we overcome this problem? because I checked skype.com in FF and IE at the same time and had a close look, but there is NO difference between div height or width, it means it is doable.

Any wise words are much appreciated.

Okay so I have a basic CSS navigation panel on the left-hand side of my webpage. Basically I surrounded an <li> tag with a solid border so it's a rectangle with some text in the middle (ie. about, home, contact us, articles, etc) and I linked it using an <a> tag:

Example:
Code:

<ul>
<a href="home.html" class="button"><li>HOME</li></a>
<a href="about.html" class="button"><li>ABOUT</li></a>
...
</ul>

Then for CSS:
Code:

#navigation ul {
	width: 128px;
	list-style: none;
	margin: 0;
	padding: 0;
}

#navigation li {
	background: #CCC;
	padding-left: 5px;
	margin-top: 5px;
	border: 1px solid #000;
	border-left: 10px solid #336699;
}

#navigation a.button {
	color: #333;
	text-decoration: none;
}

#navigation a.button:hover {
	color: #FFF;
}

The url is: Wolfenzon Schulman

It's a website for a firm I work for. So basically, on the FF edition, the buttons work as intended, the entire <li> tag is linked (<a>'ed) and you can click on any part of it to activate the :hover and follow the link. The IE version, you can only hover over the text and anywhere before that (probably because of the padding-left: 5px associated with it). No matter what I've seemed to come up with, the IE version will just not cooperate.

http://www.justusvizslas.com/CrossTies/cttemplate.php

I'm working on a new site and am trying to get a basic template set up. In my navigation menu I notice a height difference where the tabs are located. In FF it appears that the #navigation or .menu div has a slightly larger height than in IE, which just closes the height snug with the height of the tabs themselves.

Can someone explain why this is the case and how/if I can correct it so that it shows up the same in both browsers?

Thanks for taking the time to read my question.

My page has a container with only the left and right borders showing. I want to center it.

If I put in margin values that look right in FF, they are way off in IE.

I suspect that there is a difference in where IE starts counting from and where FF starts counting from. FF seems to be counting from the parent container, where as I am not sure where IE is counting from.

How can I fix this?

Thanks,

Brad

HTML:
Code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="piercedjunkmail@hotmail.com">
<meta name="generator" content="AceHTML 5 Freeware">
<link href="TestLayoutCSS.css" rel="stylesheet" type="text/css" />
<title>Test Layout 1</title>
</head>
<body>
<div id="HeaderContainer"></div>
<div id="PageTitle">This is the title of the page</div>
<div id="MajorLeftMainContainer">
	<div id="LeftMainContainer"></div>
<br />
<br />
<br />
<br />
<br />
<br />
<hr class="CenterVert" /><br />
<hr class="CenterVert" />
</div>
<div id="MajorRightTopContainer">
	<div id="RightTopContainer"></div>
	<div id="VertLines"></div>
	<div id="RightCenterContainer"></div>
	<div id="VertLines"></div>
<div id="RightBottomContainer"></div>
</div>
</body>
</html>

CSS:
Code:

@charset "iso-8859-1";
body {
font-family: Foo, times, serif;
margin: 0px;
background-color: #4F9FC5;
}

#HeaderContainer {
height: 50px;
width: 100%;
/*border-color: green;
border-style: solid;
border-width: 2px;*/
}

#MajorLeftMainContainer {
float: left;
margin-top: 90px;
margin-left: 10px;
/*width: 68%;*/
width: 670px;
height: 310px;
/*background-color: #4F9FC5;*/
background-color: yellow;
}

#LeftMainContainer {
border-top-color: #FFFFFF;
border-left-color: #FFFFFF;
border-bottom-color: #C0C0C0;
border-right-color: #C0C0C0;
border-style: solid;
border-width: 5px;
float: left;
width: 80%;
height: 300px;
background-color: #EAEAEA;
}

#MajorRightTopContainer {
float: left;
margin-top: -50px;
margin-right: 10px;
width: 30%;
height: 580px;
/*background-color: #4F9FC5;*/
background-color: green;
}

#RightTopContainer {
border-top-color: #FFFFFF;
border-left-color: #FFFFFF;
border-bottom-color: #C0C0C0;
border-right-color: #C0C0C0;
border-style: solid;
border-width: 5px;
float: left;
width: 97%;
height: 150px;
background-color: #EAEAEA;
}

#RightCenterContainer {
border-top-color: #FFFFFF;
border-left-color: #FFFFFF;
border-bottom-color: #C0C0C0;
border-right-color: #C0C0C0;
border-style: solid;
border-width: 5px;
float: left;
width: 97%;
height: 150px;
background-color: #EAEAEA;
}

#RightBottomContainer {
border-top-color: #FFFFFF;
border-left-color: #FFFFFF;
border-bottom-color: #C0C0C0;
border-right-color: #C0C0C0;
border-style: solid;
border-width: 5px;
float: left;
width: 97%;
height: 150px;
background-color: #EAEAEA;
}

#PageTitle {
font-size: 25px;
font-family: arial, times, serif;
/*border-color: green;
border-style: solid;
border-width: 2px;*/
width: 340px;
height: 35px;
margin-top: 40px;
margin-left: 25px;
color: black;
font-variant: small-caps;
}

#VertLines {
border-left-width: 4px;
border-left-color: #66CDFF;
border-left-style: solid;
border-right-width: 4px;
border-right-color: #66CDFF;
border-right-style: solid;
float: right;
width: 35px;
height: 50px;
margin-right: 100px;
}

hr.CenterVert {
vertical-align: middle;
border-width: 2px;
border-style: solid;
border-color: #4F9FC5;
}

Hi. I like to know what're the differences.

I know that css3 has more properties. It can do rounded corner border easily and also some new ways to write css.

Is this css3?
input[type="submit"]

Also I remember seeing websites mentioned css3 can be written in module or something like that?

What other differences?

Thanks.

What is the Difference between CSS2 and CSS3 ???

so what do each one do?

Hey, I'm designing using an XHTML/CSS based layout and I've noticed that the following CSS shows slightly different results on Mozilla and IE:

Code:

.box {
position:relative;
width:600px;
padding:5px;
border:1px solid black;
}

Applying this to a DIV will display a 600 pixel wide box on IE. On Mozilla (Firefox, etc) though, it'll be 612 pixels wide. This is because Mozilla is adding the padding and borders to the initial width. I would like Mozilla to display the same as on IE, so I recoded:

Code:

.box {
position:relative;
width:589px;
padding:5px;
border:1px solid black;
}

*html .box { width:600px; }

This works, although it looks a little bit like a quick hack. Is there any other way of doing this? And also, which browser, in this case, isn't following standards correctly?

Thanks,
Ralph

I am busy building a site with XHTML & CSS, which is nearly finished. I build my sites by hand and check while building in FF and IE7. When I thought I was finished I checked the site in IE6 and saw ONE of the divs was slightly shifted to the right. I was amazed, since only one of them was shifted, and nearly all are positioned in a similar matter. I have tried to remove all parts of the CSS, edited the containing layer, the layer before, and after, nothing worked. I now haven't got a clue on what to do next or what could cause this difference in rendering. Can you help me?

You can find the site here. The CSS is external, you can find it here. [edit: links are outdated, sorry /]

If have made the background of the whole site white and of the containing div (with id "main") black. The layer that is shifted now has the color red and has the CSS id "boven_rechts_top".

By the way, the XHTML is validated as: Valid XHTML 1.0 Transitional and the CSS is validated as well.

I'm a bit confused about the class and id selector. It seems they both produce the same result. I've a book and it said that the id selector can be used once. Is that mean used once on the web page or on the css?

<div class="content"></div>
<div id="content"></div>

Thanks.