|
CSS - Margin Problem With Ie And Firefox
I have a menu that has no margins and I have a content box with has a margin-left of 79.
Each menu item's length is 78 pixel, so I'd gradually guess that margin-left:78 would align the border of the menu item and the content box... Here's my problem. If I make it 78, it aligns in IE but not in Mozilla Firefox. When I make it 79, it aligns in Mozilla but not IE. Thanks in advance. Similar TutorialsSo, here's what I've got: http://www.anthonycarboni.com The header is supposed to appear 50 pixels high, flush with the top (no margins), with the header text middle aligned inside of it. This is working in IE 6 and 7, but is not working well in FF (mac/pc) or in Safari. Here is all code that pertains to that section. It is sure to be woefully poor, as I'm just getting into CSS: Code: body {
color: #FFFFFF;
background-color: #000000;
font-family: 'ArialMT', 'Arial', sans-serif;
font-size: 14px;
font-style: normal;
font-variant: normal;
font-weight: normal;
letter-spacing: 0;
line-height: 19px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
opacity: 1.00;
padding-bottom: 0px;
padding-top: 0px;
text-align: center;
text-decoration: none;
text-indent: 0px;
text-transform: none;
min-width: 800px;
}
.main{
background-color: #202020;
width: 800px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
.header{
height: 50px;
background-image: url('images/header.jpg');
background-repeat: repeat;
}
p.headline {
font-size: 32px;
font-weight: bold;
text-transform: uppercase;
text-align: center;
letter-spacing: 0.8em;
vertical-align: middle;
}
And there you have it. I'm tearing my hair out over what I'm sure is some small thing that anyone with experience would notice immediately. Any help would be greatly appreciated. Thanks! Having a weird effect in firefox in that it doesn't seem to respect the right margin correctly. What I am trying to do is line up text so that it flushes to an image that is to the right, but for some reason it pushes the image off the page. (floatWrap is a clearing div so <br style="clear: both"> is not needed) Code: Code:
<div class="floatWrap">
<div style="float: right;">
<img src='imageSrc'>
</div>
<div id="txtWrap" style="float; left;">
<div class="floatWrap">
<div style="float; right;">
Some text which should be right up on the picture and to the left of the title
</div>
<div style="float; left;">
Title which will never reach the text next to the picture
</div>
</div>
<div>
Text that will reach the picture but for some reason pushes it out of the way instead of wrapping to the next line.
</div>
</div>
</div>
#txtWrap is the div that wraps the entire contents to the left of the image. I want this to flush all the way up to the image but give a buffer of 5px. I tried setting #txtWrap {width: 100%; margin-right: 5px;} but it pushes the pic off the screen. I am assuming this b/c a scroll bar at the bottom of the browser appears I tried setting #txtWrap {margin-right: 5px;} but the text within keeps pushing farther to the right than it's supposed to, causing the whole wrap to push the to the next line. Where can I set the margin-right property so it displays correctly? on this page the image on the left that reads "Grade" is 10px from the side (where it should be) in IE... but in firefox, it isnt 10px from the side... but rather 0px... when i change the margin-right to 20px instead of 10px, it looks fine in Firefox, but 10px too far over in IE. any help would be GREAT thanks Please look at itsjustmelive.com in both firefox and internet explorer. When you roll over the "service" button in Internet Explorer the entire page moves down. Not in firefox because I specified a height. How do I fix this in IE? Thanks! Bev I've built a website using only div's and I am only having problems with one of them... I have the div with a margin-left : 48px; In IE this aligns the div with a section of text above it (the result I had wanted) however in Firefox it displays about 20pixels to the left of the IE display. If I set the margin-left : 96px; it aligns properly in Firefox but is then messed up in IE. I have an attachment of my code its not very large. Is there any fix for this problem? Hello, I'm having a slight issue with what I belive to be margins. In IE half the logo is being cut off and in firefox I have a grey area above the menu bar that shouldn't be there. I have checked both my css and xhtml both validated fine with out any warnings. I'm pretty new to CSS and this is starting to annoy me =\. **WARNING** The site is political in nature. Links to the code: h**p://www [.] dncreform [.] com / t / css / main.css h**p://www [.] dncreform [.] com / t / Thank You, William Hi, First post on here! ...I have a problem with the default margin in IE being 1px less than Firefox. I've stripped my CSS down to be as naked as possible! It's quite frustrating as I'm quite experienced with CSS, I guess the small silly things do things like this when you've not been CSS'n for a few months! HTML:- Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body> test </body> </html> CSS:- Code:
* { margin: 0; padding: 0; }
Hey y'all. I was hoping someone could help me with some minor margin/padding issues. At one point I knew how to fix this, but I can't for the life of me remember. The site is www (dot) texasarmor (dot) com I like the way the divs are spaced in IE but I don't know how to make IE and Firefox the same. Please help... Also, please if you could, any critiques? Suggestions? Thanks very much. -michael I've build a little nav that seems to work perfectly in IE, but is hated by FireFox. Specifically it seems like firefox is ignoring my margin and padding settings. Can anyone tell me what I'm doing wrong? Thank you. Code: <html>
<head>
<title>Untitled</title>
<style type="text/css">
<!--
DIV{-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding: 0;}
.NavContainer {
position:relative;
padding:0em;
width: 930px;
height: 27px;
margin:0em;
background-image: url(images/nav/navBg.gif);
background-repeat: no-repeat;
}
.NavLeftPad {
position:relative;
padding:0em;
width: 87px;
height: 27px;
margin:0em;
float:left;
background-image: url(images/nav/spacer.gif);
background-repeat: no-repeat;
}
.NavRightPad {
position:relative;
padding:0em;
width: 87px;
height: 27px;
margin:0em;
float:left;
background-image: url(images/nav/spacer.gif);
background-repeat: no-repeat;
}
.Nav2pxPad {
position:relative;
padding:0em;
width: 2px;
height: 26px;
margin: 1px,0px,0px,0px;
float:left;
background-color:#54636D;
}
.NavLink {
font-size:12px;
color:#FFFFFF;
font-family:arial,helvetica,sans-serif;
text-decoration:none;
font-weight:normal;
line-height: normal;
}
.NavBlock {
position:relative;
padding: 7px,3px,0px,0px;
height:26px;
margin: 1px,0px,0px,0px;
float:left;
background-color:#54636D;
text-align: right;
}
.NavWhatIsDermalounge {width:126px;}
.NavOurTreatments {width:125px;}
.NavOurClinicians {width:115px;}
.NavLocations {width:92px;}
.NavTechnology {width:96px;}
.NavAboutUs {width:94px;}
.NavMakeover {width:96px;}
-->
</style>
<script language="JavaScript">
// On/Over state color #E46804 orange
// Off state color #54636D nav-gray
var theNavState = 'NavWhatIsDermalounge';
apAddLoadEvent(NavInit);
function apAddLoadEvent(aponfunc) {
var apoldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = aponfunc;
} else {
window.onload = function() {
apoldonload();
aponfunc();
}
}
}
function NavInit(){
if (theNavState != '') {
document.getElementById(theNavState).style.backgroundColor = "#E46804";
}
}
function NavRollOver(theElement){
document.getElementById(theElement).style.backgroundColor = "#E46804";
}
function NavRollBack(theElement){
if (theElement != theNavState) {
document.getElementById(theElement).style.backgroundColor = "#54636D";
} else {
document.getElementById(theElement).style.backgroundColor = "#E46804";
}
}
</script>
</head>
<body>
<div id="NavContainer" class="NavContainer">
<div id="NavLeftPad" class="NavLeftPad"></div>
<div id="NavWhatIsDermalounge" class="NavBlock NavWhatIsDermalounge"><a href="what_is.html" onMouseOver="NavRollOver('NavWhatIsDermalounge');" onMouseOut="NavRollBack('NavWhatIsDermalounge');" class="NavLink">What is dermalounge</a></div>
<div id="Nav2pxPad" class="Nav2pxPad"></div>
<div id="NavOurTreatments" class="NavBlock NavOurTreatments"><a href="treatments.html" onMouseOver="NavRollOver('NavOurTreatments');" onMouseOut="NavRollBack('NavOurTreatments');" class="NavLink">Our treatments</a></div>
<div id="Nav2pxPad" class="Nav2pxPad"></div>
<div id="NavOurClinicians" class="NavBlock NavOurClinicians"><a href="clinicians.html" onMouseOver="NavRollOver('NavOurClinicians');" onMouseOut="NavRollBack('NavOurClinicians');" class="NavLink">Our clinicians</a></div>
<div id="Nav2pxPad" class="Nav2pxPad"></div>
<div id="NavLocations" class="NavBlock NavLocations"><a href="locations.html" onMouseOver="NavRollOver('NavLocations');" onMouseOut="NavRollBack('NavLocations');" class="NavLink">Locations</a></div>
<div id="Nav2pxPad" class="Nav2pxPad"></div>
<div id="NavTechnology" class="NavBlock NavTechnology"><a href="technology.html" onMouseOver="NavRollOver('NavTechnology');" onMouseOut="NavRollBack('NavTechnology');" class="NavLink">Technology</a></div>
<div id="Nav2pxPad" class="Nav2pxPad"></div>
<div id="NavAboutUs" class="NavBlock NavAboutUs"><a href="about.html" onMouseOver="NavRollOver('NavAboutUs');" onMouseOut="NavRollBack('NavAboutUs');" class="NavLink">About us</a></div>
<div id="Nav2pxPad" class="Nav2pxPad"></div>
<div id="NavMakeover" class="NavBlock NavMakeover"><a href="makeover.html" onMouseOver="NavRollOver('NavMakeover');" onMouseOut="NavRollBack('NavMakeover');" class="NavLink">Makeover</a></div>
<div id="NavRightPad" class="NavRightPad"></div>
</div>
</body>
</html>
I've a menu bar that's a horizontally displayed list (i.e. set up with the following values: ul{ margin-top:5px; margin-bottom:5px; margin-left:0px; } li.inline { display:inline; padding-left:5px; padding-right:5px; border-left:1px solid #fff; } Contained in the following code: <div id="mainNav"> <UL> <li class="first"><a href="../about/index.html">About</a></li> <li class="inline"><a href="../contact/index.html">Contact</a></li> <li class="inline"><a href="../services/index.html">Services</a></li> <li class="inline"><a href="index.html">Portfolio</a></li> </UL> On IE 6.0 it does as required and there is no padding between the first element (About) and the left hand side of the page. BUT, on Firefox, about 5 characters worth of padding is between the left hand of the page and the first element. Is there a way to get both Firefox and IE to have no padding? Thanks </div> Hi, I'm noticing a different behaviour between firefox and explorer regarding de margin attribute, and I can't explain it applying the well known box model difference. Here is the css code: Code: div#main {
margin: 10px auto 20px auto;
width: 1001px;
border: 1px solid #000000;
}
div#left {
float: left;
width: 150px;
}
div#content {
width: 600px;
margin-left: 160px;
background-color:#0033CC;
}
Here is the HTML: Code: <div id="main"> <div id="left">left</div> <div id="content">content</div> </div> What I get in firefox is the expected, the content div is exactly at 160px distance of the inner part of the main div border. However in explorer the distance is 163px?? According to the box model difference, if we consider that in explorer the width includes the border, the distance should be 161px but not 163px. Any ideas? Caste I am currently having to deal with a mystery padding at the bottom of each of my im_container tags... everything is set to 0px, and oddly enough... it looks GREAT in IE (ugghh... i can't believe i just said that)... it doesnt however look good in firefox... whats up... here is the XHTML followed by the CSS.. Code: <div class="im_left"> <div class="im_container"> <div class="im_logo"><img src="/images/im_icq.gif" alt="Contact Via ICQ" /></div> <div class="im_info"> 164149536 </div> <div class="clear"></div> </div> <div class="im_container"> <div class="im_logo"><img src="/images/im_aim.gif" alt="Contact Via AIM" /></div> <div class="im_info"> Incomplete Gamer </div> <div class="clear"></div> </div> </div> Code: .im_left {float:left; width:270px;}
.im_container {
margin:0 0 0 30px !important;
border:1px solid #900;
}
.im_container a:link,
.im_container a:visited,
.im_container a:active,
.im_container a:hover {color:#FFF;}
.im_logo {
margin:0px 0 0 0;
float:left;
width:30px; margin:0px; padding:0px;
}
.im_logo img {border:0px; margin:0px; padding:0px;}
.im_info {
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
margin:0 0 0 5px;
text-align:justify;
width:200px;
float:left;
}
.im_title {
text-align:center;
font-weight:bold;
}
For some reason, when I hover over images in the #content div of my site firefox is adding a strange little box to the bottom right hand corner of the image. The color of the box is the same color as my text hyperlinks which makes it more interesting. You can see the issue on my site. Here is the code that deals with the images in the #content div: Code: #content img {
margin:2px 5px 0px 0px;
}
#content a img, #content a:visited img, #content a:active img {
border:2px solid #6FA6D9;
}
#content a:hover img {
border:2px solid #ffffff;
}
This issue is only happening on the images I insert from my wpg2 gallery. The images get one of the following classes applied to them: Code:
.g2image_float_left {
display:block;
float:left;
}
.g2image_float_right {
display:block;
float:right;
margin-left:5px;
}
Now I don't see how either of these could cause a problem but they have to be the issue considering this doesn't happen on images that don't have one of the above classes applied to them. Any ideas what is causing this? Thanks in advance. Hello All, I have an image with a text label to the right that is linked. Now, I want a little whitespace between the image and the text, so that the text doesn't butt up right against the image. To accomplish this, I could use a non-breaking space ( ) However, the space then becomes part of the link and it gets underlined. So, by adjusting the image's margin (or padding) CSS, I can achieve the desired result... at least in Internet Explorer. Firefox/Safari/Chrome seem to underline a linked image's margin as well. I tried using "padding" CSS instead, but produced the same result. How can I get Firefox/Safari/Chrome to underline JUST the text in a link, and not the image (and it's margin) as well? This is how the code is displayed in IE: http://img407.imageshack.us/img407/2360/pfieeu9.jpg Firefox/Safari/Chrome: http://img407.imageshack.us/img407/5421/pffirefoxvv1.jpg You can see the little extra "nubbin" of underline between the icon image and the text. CSS: Code:
a.red10ullink:link {color: #a80000;
font-size: 10pt;
font-family: arial;
text-decoration: underline;}
a.red10ullink:visited {color: #a80000;
font-size: 10pt;
font-family: arial;
text-decoration: underline;}
a.red10ullink:hover {color: #333333;
font-size: 10pt;
font-family: arial;}
img.icon {vertical-align: middle;
border-width: 0px;
margin: 0px 5px 0px 0px;}
HTML: Code: <a href="somepage.html" class="red10ullink"><img src="icon_pf.gif" alt="" width="20" height="20" class="icon" />Printer Friendly</a> Thanks! Hi! I have a problem in Firefox with a layout located at: link removed. Please follow this path: Executive Furniture > Executive Desks > The Haydon Range - and then select a product. Don't open a new tab, refresh the page or resize the text and scroll down. There is a huge gap between the last 'related items' product and the card images. Now if you open a new tab, resize the text or refresh the page, the gap disappears and won't re-appear until you close the window and re-open the site in a new window (start a new session maybe). I have a feeling this has something to do with margins or it may just be a bug - I haven't a clue! The relevant CSS is situated at link removed. The main template layout is shared between the other CSS files in that directory, but they aren't relevant to that part of the layout. I apologise for it not being the most efficient CSS in the world . You'll have to "view source" for the HTML; and this I won't apologise for, because it's being spat out by the crappiest piece of shopping cart software ever. It took me 4 months to get it to validate (originally 850+ errors)! Anyway, if any of you could help me figure out why Firefox is displaying this big margin I would be eternally grateful. Cheers I have a question about the behavior of the margins for contents of a container div. Basically what I have done is created a container div that has a specified width but no margin, so it should be slammed up against the top, left, and bottom of the page. However, when I put divs inside the container div, their margins seem to be applying to the container as well - at least their top and bottom margins seem to be. I've included the code below, which can easily be copied and pasted. Basically what's happening is that if the first div inside the container has a top margin, that margin is then being applied to the container div, meaning the container div is then pushed down from the top of the page by the amount of top margin specified. The same thing is happening at the bottom of the container div when I've included a bottom margin on the last element inside the container. To my surprise, this problem is only happening in Firefox. It is showing exactly how I want it to in IE6. Here is the code. This is just a very simple page to demonstrate the problem, so I used an embedded style sheet. I am using the transitional doctype (couldn't include it here because it contains a URL). The height of the first div inside the container is so big so that the page must be scrolled down to see the entire thing on any normal screen resolution: <html> <head> <title>box test</title> <style type="text/css"> body {margin: 0; padding: 0;} #bgbox {width: 500px; background-color: #aaaaaa; margin: 0; padding: 0;} #boxone {height: 700px; border: 1px solid #000000; background-color: #ffffff; margin: 20px; padding: 20px; color: #000000;} #boxtwo {border: 1px solid #000000; background-color: #ffffff; margin: 20px; padding: 20px; color: #000000;} </style> </head> <body> <div id="bgbox"> <div id="boxone">This is box one</div> <div id="boxtwo">this is box two</div> </div> </body> </html> Any thoughts? Thanks! Hi. Can anyone tell me why Internet Explorer doubles the margin width on the left side in this example? http://www.dirtybbq.com/test/ This works fine in FireFox. Thanks for your help. Here is my style sheet... Code:
body {
background-color: #E0E0E0;
text-align: center;
}
p, input, select, th, td, h1, h2, textarea {
font-family: verdana;
font-size: 11px;
}
#container {
border: 1px solid #000000;
background-color: #FFFFFF;
background-image: url('../images/bg.gif');
background-position: right;
background-repeat: repeat-y;
border: 1px solid #666666;
margin-left: auto;
margin-right: auto;
width: 641px;
}
#header {
background-color: #666666;
background-image: url('../images/hd.gif');
background-position: bottom left;
background-repeat: no-repeat;
height: 64px;
width: 641px;
}
#footer {
background-color: #666666;
padding-bottom: 0px;
text-align: left;
width: 641px;
}
#footer p {
color: #FFCC00;
font-size: 10px;
margin: 0px;
padding: 4px;
}
#footer a {
color: #FFCC00;
font-weight: bold;
text-decoration: none;
}
#footer a:hover {
text-decoration: underline;
}
#left {
background-color: #FF6600;
float: left;
margin: 10px;
margin-right: 11px;
text-align: left;
width: 400px;
}
#side_bar {
background-color: #FFFF00;
float: right;
text-align: left;
width: 220px;
}
Hi, My site looks fine in Dreamweaver, but when I upload it to my server and view it, there is a big margin at the top. I am using one of Dreamweaver's templates. All my CSS is currently in the header. the site is here How do I get rid of the spacing above the header? thanks Hi guys, i'm having trouble coding this. page is located at www.graffetto.com . The div on the right hand side is being rendered 1px away from the scroll bar (to the left) in IE, but firefox is correctly rendering it directly next to the scrollbar with no gap. I have already set body margins and padding to 0px all around. is there a way to fix this without using a JS detect browser? I can fix this problem through IE by setting the div margin-right: -1px, but this causes firefox to render the image 1px too far to the right, bringing up the horizontal scrollbar. well here is my code, if anyone can help, id greatly appreciate it! CSS: Code: body
{
margin: 0px;
padding: 0px;
background-image: url(http://graffetto.com/bg.gif);
background-repeat: repeat-x;
}
#rightcontent
{
position: absolute;
top: 0px;
right: 0px;
}
#centercontent
{
margin-right: 186px;
}
HTML: Code: <div id="centercontent"> <img src="left.jpg"> </div> <div id="rightcontent"> <img src="right.jpg" /> </div> page link again: www.graffetto.com Hi all, I'm not new to CSS in general but quite a novice when it comes to CSS positioning (absolute,relative etc.) I have built one simple web page as follows: http://www.jaysonsgroup.com/ztest/znuvo/z-index.html HTML: Code: <div id='contents'> <div id='main'> <a href='mailto:info@nuvohome.com'>info@nuvohome.com</a><br/><br/><br/><br/> ... *remainder text as you see on the web page**.. </div> <div id='footer'>We are working on that 100% green solution!</div> </div> The CSS as follows: Code: /* CSS global reset for all browsers */
* {
padding: 0;
margin: 0;
}
/******* main *******/
html, body, #contents {
width: 100%;
height: 100%;
}
/*
* The "height" above is a hack for IE5+/Win. Below we adjust
* it using the child selector to hide from IE5+/Win
*/
html>body, html>body #contents {
height: auto;
}
body, p, td {
font-family: Century Gothic, Verdana, Arial;
font-size:10pt ;
font-weight:normal;
line-height: 17px;
color: #007700;
}
body {
margin: 0;
background: url(../images/body/bg.jpg) repeat-y;
}
a, a:visited {
color: #007700;
font-size: 11pt;
}
#contents {
margin: 0 auto;
width: 500px;
}
#main {
text-align: center;
padding-top: 70px;
margin-top: 15%;
background: url(../images/goinggreen.jpg) no-repeat top center;
}
#footer {
position: absolute;
bottom: 0;
text-align: center;
width: 300px;
background: url(../images/bioh-logo.gif) no-repeat top right;
padding-top: 68px;
padding-right: 160px;
padding-bottom: 68px;
}
This page is done, except in Firefox the text is quite high (because I've set the margin-top: 15%; in the #main div) but in IE6, the main text seems to have a MUCH bigger top margin. Please preview on Firefox and IE to compare - you will notice a considerable margin difference. Just wondering why this is happening? There is an alternate version which I experimented with, using more on CSS positioning, but it still doesn't solve my problem..(and I sort of prefer the other version anyway)... http://www.jaysonsgroup.com/ztest/z...dex-strict.html Any advice on an IE6 hack or something to improve my code? TIA! |
|||||||