|
CSS - Small Difference Div Position Between Ie 6 / Ie7 & Ff
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. Similar TutorialsI have having issues with IE displaying my page wrong. The page is http://]http://tampabay-online.org/cetr/about.php (or any page within that site) and the css can be found at http://tampabay-online.org/cetr/cetr.css It displays fine in Firefox and Opera but IE makes the content class lower from the top than the #right navigation bar (they should both be 20 pixels form the top) Any help much appreciated. Code: .content {
position:relative;
width:320px;
margin-left: 125px;
margin-top: 20px;
border:1px solid black;
background-color:white;
padding:10px;
z-index:3;
}
#right {
position:absolute;
width:200px;
top:20px;
left:500px;
border:1px solid black;
background-color:white;
padding:10px;
z-index:1;
}
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? What is the difference between these two: .itemBox #itemBox I'm trying to figure out what the difference is between these variables. Can anyone help explain why my menu is displaying differently in FF and IE? I've done some research and tried a few hacks, I cannot figure this one out. http://www.departurestudios.com/playground/ Firefox Screenshot - http://www.departurestudios.com/playground/ff_screen.jpg IE Screenshot - http://www.departurestudios.com/playground/ie_screen.jpg My goal is to get it to look like it does in FF. Thanks. Hello, I am trying to get my drop down boxes to line up properly and it is not working out for me in IE. Firefox looks alright, but I am having trouble getting it to line up in IE. Can someone please take a look at This Example and advise me on anything you see that is out of place. Thanks for the insight. webg 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. I have created a menu using css... but when i view it in ie it looks just about right.. but on firefox.. the width is just off... example IE: width is fine ------------------ --------- | | | | | | |______| but in firefox it just go all the way across the screen.. arg Code:
.navcontainer ul
{
margin-top: 0;
margin-left: 2;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px
}
.navcontainer {
margin: auto;
}
.navlist a {
width: 100%;
}
.navcontainer>.navlist a {
width: auto;
}
.navcontainer a
{
display: block;
padding: 1;
width: 165;
background-color: #003366;
border-bottom: 1px solid #eee;
}
.navcontainer a:link, .navlist a:visited
{
color: #EEE;
text-decoration: none;
}
.navcontainer a:hover
{
background-color: #369;
color: #fff;
}
i have attached the html file here.. cause i cant upload it. 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;
}
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? 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. I'm kind of clueless right now because for my CSS code, the gap between the header and the navigation bar is completely different for Firefox than IE. I designed it in IE (which was probably a mistake in hindsight) so that's the browser it appears fine in, but in Firefox the gap is about 2-5 pixels. I've looked at all the resources online, but still can't figure out how to fix the code, so if someone could edit the code below so it works I'd be greatly thankful. Cheers. CSS Extract: Code:
#wrapper, #content-wrapper {
float: left;
width: 100%;
}
#header {
height: 100px;
padding: 15px 0 5px 0;
background: url("http://talkpw.com/images/index_02.gif");
vertical-align: middle;
}
#navbar {
height: 28px;
border-bottom: 1px solid #ccc;
background: url("http://talkpw.com/images/index_08.gif");
}
.in {
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
vertical-align: middle;
}
.ina {
margin: 5px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 1;
vertical-align: bottom;
}
.navtext a:link,
.navtext a:visited,
.navtext a:active{
color: #FFFFFF;
text-decoration: none;
vertical-align: bottom;
}
.navtext a:hover{
color: #FF0000;
}
HTML: Code:
<div id="wrapper">
<div id="header">
<div valign="top" class="in">
<img src="http://www.talkpw.com/images/logonew.gif">
</div>
</div>
<div id="navbar">
<div class="ina"><span class="navtext"><font face="Tahoma" size="2" color="#FFFFFF"><a href="http://www.talkpw.com/index.php" style='text-decoration: none;'>Home</a> | <a href="http://www.talkpw.com/forums">Forums</a> | <a href="http://www.talkpw.com/videos.php">Videos</a> | <a href="http://www.talkpw.com/forums/index.php?autocom=arcade">Arcade</a> | <a href="http://www.talkpw.com/links.php">Links</a> | <a href="http://talkpw.com/forums/index.php?act=Reg&CODE=00">Register</a></font></span>
</div>
so what do each one do? What is the Difference between CSS2 and CSS3 ??? Here's my page http://www.martcol.co.uk/Andy/ I can't get the image caption to line up in FF and IE6. I know it's something to do with the Box Model but if I get it in one, it goes out in the other.... Here's my CSS http://www.martcol.co.uk/Andy/main.css I imagine it's only a little tweak on this but I can't seem to get it. Thank Martin 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. 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 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. Hello, I use the following css code to define the style of some tables. However in Firefox it shows it how i want it, but in IE it doesnt display the borders. (not around the rows of the table). Code: table.listings{
border-collapse: collapse;
border-style: none;
}
table.listings tr{
border-style: solid;
border-color: #4D3D4D;
border-width: 1px;
}
.darkRow td{
background-color: #4D3D4D;
color: white;
padding-left: 4px
}
.lightRow td{
background-color: #BFACBF;
color: #4D3D4D;
padding-left: 4px;
}
I create the tables something like this: Code: <table class="listings"> <tr class="darkRow"><td>bla</td></tr> <tr class="lightRow"><td>bla</td></tr> </table> Why does it display so much different in those 2 browsers? 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? |
|||||||