|
CSS - Margin Difference In Ff And Ie
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;
}
Similar TutorialsI've been looking through many, many forums trying to resolve this issue, so please forgive me if there is a solution to this that I've missed. Here's the deal: On some installs of Firefox (4.0), the body is being positioned 28px lower than the top of the screen. I set the <html> tag to have a light blue background to troubleshoot the issue, and now there is a light blue bar across the top of the page, proving that it is the body of the page that is lower than it should be. I thought it was a Firefox "collapsing margin" issue, so I added "margin:0; to almost everything, and it didn't help. I'm trying to do this without having to absolutely position everything. Here's the site: www-dot-myportlandtours-dot-com here's the css: www-dot-myportlandtours-dot-com/wp-content/themes/myportlandtours/style.css Anybody have insight into this? Background info: - I have validated the page and CSS, no problems there - Site is working properly in Firefox and IE, seems to be a margin issue in Safari -This margin issue is not the common Safari bug with a negative margin being applied to a floated element -I am using Safari in a windows environment, I do not have a Mac The problem: -in Safari the top margin on the content either is either not being applied at all or is being interpreted differently -it may be of note that I was having the same issue with IE, but was able to specify an IE specific style sheet for it, I don't believe this is possible in Safari? The website: http://www.lisa-noble.com/test/redo.html The HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Site Test</title>
<link rel="stylesheet" type="text/css" href="redo.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->
</head>
<body>
<div id="top_filler">
</div>
<div id="left_filler">
</div>
<div id="right_filler">
</div>
<div id="top_left">
</div>
<div id="header">
</div>
<div id="top_right">
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Etc, etc, etc....</p>
</div>
<div id="bottom_filler">
</div>
<div id="bottom_left">
</div>
<div id="bottom_right">
</div>
</body>
</html>
The CSS Code: * {
margin: 0;
padding: 0;
}
body {
background: #fdd9e9;
}
div#top_filler {
background: url(images/bg_slice_sm.png) repeat-x;
width: 100%;
height: 164px;
position: fixed;
top: 0px;
z-index: 5;
}
div#left_filler {
background: url(images/left_slice_sm.png) repeat-y;
width: 174px;
height: 100%;
position:fixed;
left:0px;
z-index: 5;
}
div#right_filler {
background: url(images/right_slice_sm.png) repeat-y;
width: 161px;
height: 100%;
position:fixed;
right: 0px;
z-index:5;
}
div#bottom_filler {
background: url(images/bottom_slice_sm.png) repeat-x;
width: 100%;
height: 76px;
position: fixed;
bottom: 0px;
z-index: 5;
}
div#header {
position: fixed;
top: 0px;
left: 37%;
height: 125px;
width: 316px;
margin: 0 auto;
background: url(pink_logo2.png) no-repeat;
z-index: 25;
}
ul.NoBulletNoIndent {
list-style-type: none;
margin-left: 0px;
padding-left: 0px
}
div#top_left {
height: 314px;
width: 221px;
background: url(images/left_top_corner_sm.png) no-repeat;
position: fixed;
top: 0px;
left: 0px;
z-index: 5;
}
div#bottom_left {
height: 175px;
width: 176px;
background: url(images/left_bottom_corner_sm.png) bottom no-repeat;
position: fixed;
bottom: 0px;
left: 0px;
z-index: 5;
}
div#top_right{
height:174px;
width:174px;
background: url(images/right_top_corner_sm.png) top no-repeat;
position: fixed;
top:0px;
right: 0px;
z-index:5
}
div#bottom_right{
height: 602px;
width:198px;
background: url(images/right_bottom_corner2_sm.png) bottom no-repeat;
position: fixed;
bottom: 0px;
right: 0px;
z-index: 5
}
div#content {
margin: 40px 164px 0px 180px;
position: relative;
z-index: 1;
}
Heya guys, Hope someone can help me with this one. Been looking around the web but most are suggesting to do what i have already done. I've got this in style.css file: Code: /* SEARCH Bar */
.lb_bl {background: url(/img/lb_bl.gif) 0 100% no-repeat #E5ECEC}
.lb_br {background: url(/img/lb_br.gif) 100% 100% no-repeat}
.lb_tl {background: url(/img/lb_tl.gif) 0 0 no-repeat}
.lb_tr {background: url(/img/lb_tr.gif) 100% 0 no-repeat; padding: 3px}
.clear {font-size: 1px; height: 1px}
.topform {
position: absolute;
right: 5px;
top: 65px;
width: 300px;
font-size: 10px;
font-family: myriad, verdana, sans-serif;
text-align: right; }
input, form {
font-size: 11px;
font-family: myriad, verdana, sans-serif;
margin-bottom: 0px;
margin: 0px; }
/* End of SEARCH Bar */
Which refers to this part of my index.php page: Code: <!-- Top right SEARCH -->
<div class="topform">
<div class="lb_bl">
<div class="lb_br">
<div class="lb_tl">
<div class="lb_tr">
<form name="form" id="form" method="post" action=""><input name="search" type="text" />
<input name="search" type="button" value="SEARCH" /></form>
</div>
</div>
</div>
</div>
<div class="clear"> </div>
</div>
<!-- End of top right SEARCH -->
But i am still getting a space below the form in IE (firefox is perfect). What should i do? You can see an example of the page at www.theresortwarehouse.com Thanks in advance to anyone who can help - Gaz Hi! Should I do this? p { margin-top: 2em; margin-bottom: 2em; } or this: p { margin-bottom: 2em; } Same question for headers (h1, h2, etc) Thanks! Hi all Take a look at this in Firefox and then in IE7: http://www.josh.ch/files/temp/ie7_margin_bug/formulare.html The text input and the textarea fields have a strange margin on the left in IE7 that shouldn't be there. It seems to be "inherited" by the outher paragraph, just change the value in css/general.css on line 29 to see it happen. FF and IE6 behave well, IE7 doesn't. Interestingly, the select field (and all the other fields like radio buttons and checkboxes) don't have this problem. I did a search and found this link: http://www.positioniseverything.net/explorer/floatIndent.html Seems to be something like that, but the display:inline fix didn't help. the only way I see is a minus margin for the text input and textarea fields for IE7 only, but maybe there's a cleaner way? Thanks a lot for help :-) Josh Hi there, I have recently stumbled about a problem I had with another website I made as well, but since it was at the very bottom back then I kinda ignored it. My new website has this right in the header though, and so I decided to ask for help. Works perfectly in Gecko based browsers, though. I have the problem that I have to Div's right after each other which both have a top and bottom margin of zero, but there is a visible gap between them, only in IE though (header and content as well as content and footer) and in Opera 7.54 at the very bottom. The colors of the background PNG are also broken in IE, never mind that, will exchange that with a JPG. Website in question is http://cyxxon.com, WordPress with my own template. Had the same problem with a website completely handcoded by me. Any ideas? Thomas 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? 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. 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. 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. 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? 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 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>
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. 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. 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 What is the Difference between CSS2 and CSS3 ??? |
|||||||