|
CSS - Firefox Ignoring Margin And Padding, Help.
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>
Similar TutorialsHey 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 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;
}
this never happens in IE, only FF sometimes when i visit my site the letter links in the menu are messed up. like the padding is ignored on only 1 of the letters when they ALL use the exact same code. heres what i'm talking about: what it should look like: what it sometimes looks like: as you can see, the padding on 1 letter is ignored. sometimes this alternates between different letters, but its always only 1 letter that this happens to. here is my css code: Code:
#menubarbg {
background: url(images/menu_bar_bg.gif) repeat-x;
}
#menuletter a {
background: url(images/menu_letter_bg_noh.gif) repeat-x;
font-weight: bold;
display: block;
text-align: center;
color: #ffffff;
text-decoration: none;
line-height: 20px;
cursor: pointer;
}
#menuletter a div {
background: url(images/menu_letter_l_noh.gif) left top no-repeat;
}
#menuletter a div div {
background: url(images/menu_letter_r_noh.gif) right top no-repeat;
padding: 0px 6px 0px 6px;
height: 20px;
}
#menuletter a:hover {
background: url(images/menu_letter_bg_h.gif) repeat-x;
color: #000000;
}
#menuletter a:hover div {
background: url(images/menu_letter_l_h.gif) left top no-repeat;
}
#menuletter a:hover div div {
background: url(images/menu_letter_r_h.gif) right top no-repeat;
}
here is the html code: Code: <table cellpadding="0" cellspacing="0" border="0"> <tr> <td id="menuletter"><a href="guitar-tabs/1.html"><div><div>#</div></div></a></td> <td id="menuletter"><a href="guitar-tabs/a.html"><div><div>A</div></div></a></td> <td id="menuletter"><a href="guitar-tabs/b.html"><div><div>B</div></div></a></td> <td id="menuletter"><a href="guitar-tabs/c.html"><div><div>C</div></div></a></td> <td id="menuletter"><a href="guitar-tabs/d.html"><div><div>D</div></div></a></td> <td id="menuletter"><a href="guitar-tabs/e.html"><div><div>E</div></div></a></td> <td id="menuletter"><a href="guitar-tabs/f.html"><div><div>F</div></div></a></td> <td id="menuletter"><a href="guitar-tabs/g.html"><div><div>G</div></div></a></td> <td id="menuletter"><a href="guitar-tabs/h.html"><div><div>H</div></div></a></td> <td id="menuletter"><a href="guitar-tabs/i.html"><div><div>I</div></div></a></td> <td id="menuletter"><a href="guitar-tabs/j.html"><div><div>J</div></div></a></td> <td id="menuletter"><a href="guitar-tabs/k.html"><div><div>K</div></div></a></td> <td id="menuletter"><a href="guitar-tabs/l.html"><div><div>L</div></div></a></td> <td id="menuletter"><a href="guitar-tabs/m.html"><div><div>M</div></div></a></td> <td id="menuletter"><a href="guitar-tabs/n.html"><div><div>N</div></div></a></td> <td id="menuletter"><a href="guitar-tabs/o.html"><div><div>O</div></div></a></td> <td id="menuletter"><a href="guitar-tabs/p.html"><div><div>P</div></div></a></td> <td id="menuletter"><a href="guitar-tabs/q.html"><div><div>Q</div></div></a></td> <td id="menuletter"><a href="guitar-tabs/r.html"><div><div>R</div></div></a></td> <td id="menuletter"><a href="guitar-tabs/s.html"><div><div>S</div></div></a></td> <td id="menuletter"><a href="guitar-tabs/t.html"><div><div>T</div></div></a></td> <td id="menuletter"><a href="guitar-tabs/u.html"><div><div>U</div></div></a></td> <td id="menuletter"><a href="guitar-tabs/v.html"><div><div>V</div></div></a></td> <td id="menuletter"><a href="guitar-tabs/w.html"><div><div>W</div></div></a></td> <td id="menuletter"><a href="guitar-tabs/x.html"><div><div>X</div></div></a></td> <td id="menuletter"><a href="guitar-tabs/y.html"><div><div>Y</div></div></a></td> <td id="menuletter"><a href="guitar-tabs/z.html"><div><div>Z</div></div></a></td> </tr> </table> the reason it uses a table is so it displays properly on all browsers. help.... Please look at this page in IE7 and FF http://ameritech.tmhdesign.com/x.asp The margin-top for the footer div and the h3 margin for this element are ignored... Code:
div#hp_service{
background:transparent url(../images/hp_service_div_bg.jpg) no-repeat;
width:436px;
height:330px;
margin-left:14px;
}
div#hp_service h3{
margin:10px 0 0 10px !important;
font-weight:normal;
}
PS. After making this post I modified the div in question to have the h3 position absolute, and I added a div called .ser, but in FF the layout is all messed up, in IE it is fine. I put a bg color of blue on the div.ser and I see the height is messed up. Why don't the p element expand the height of the parent div? Please look at http://www.rodstrans.com/diagnosis/body_leaks.html In IE & Chrome the checkboxes are positioned absolute in each table cell, but in Firefox they all bunch at the top left. I have put a position:relative on all parent elements and can not figure out what is happening. Okay, So here is the situation and it has had me stumped for 2 days. I have a site that was displaying perfectly on my local server - I have xampp installed to test site locally. I have a site that is displaying perfectly in Opera, Google Chrome, Safari and Firefox....and locally on IE8. Now here is the kicker. Once I upload it to my server online the layout is thrown out of whack in IE. Why would there be a difference between a local view and an online view in IE? Hi! Is it a good idea to always use padding and never margin (span, divs, etc.)? or would a combination between margin and padding be better? P.S. In some places I must use padding... in the others I use margin but could use padding instead... wouldn't it be more consistent to always use padding? Thank you Hello, Can anyone explain me why the texts in the following example are not in the same (relative) position? It looks like that in the first container, the margin is actually more than I specified (10px)... I don't get it... :S Thanks, diodorus 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" xml:lang="en" lang="en">
<head>
<title>Title</title>
<style type="text/css">
#container{
margin: 0px;
padding: 0px;
width: 1000px;
background: #ccc;
}
.block {
background: #0ff;
float: left;
height: 100%;
margin: 10px;
text-align: left;
width: 230px;
}
.block2 {
background: #0ff;
float: left;
height: 100%;
padding: 10px;
text-align: left;
width: 230px;
}
</style>
</head>
<body>
<p>First:<p>
<div id="container">
<div class="block">aaa</div>
<div class="block">bbb</div>
<div class="block">ccc</div>
<div class="block">ddd</div>
</div>
<p>Second:<p>
<div id="container">
<div class="block2">aaa</div>
<div class="block2">bbb</div>
<div class="block2">ccc</div>
<div class="block2">ddd</div>
</div>
</body>
</html>
I've run into this problem a few times. The padding attribute has spottty support in IE. Same with margin. Has anyone found a workaround? For example, I would like paragraphs and bullet points to have extra space above them. In the past, I've set a style using padding-top to specify this space. However, in IE it yields some bad results. Similarly, I've got some text links which I would like to bump over to the right a few pixels. Padding or margin would sure come in handy. Any other ways to achieve the same result? Please look at the main navigation on this site www.downtowntransmission.com I have it exactly how I want it in IE7 but it is a bit off in FF. Mouseover the Contact link and Gallery Link and you will see what I mean. Is there some small adjustment I can make to make it look the same in both? As a side note, do you like the site? T Hello, I always use EM for text size, letter spacing and line heights. For DIV widths I usually use PIXELS if fixed width web site and PERCENT if fluid layout web site. I think in both cases I am doing the right thing ... I think. But what unit should I use for padding and margin? EM? PIXEL? Thanks, Miguel Hi, i try to print some variables on a ticket. A ticket which is already printed. I try to reach a result like this: This is the html: PHP Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <HTML> <HEAD> <TITLE>Printing Ticket...</TITLE> <LINK REL="stylesheet" TYPE="text/css" MEDIA="print" HREF="foo.css"> <link rel="stylesheet" type="text/css" media="screen" href="foo.css"> </HEAD> <BODY> <div id="menu" class="menu"><center><p><br>The ticket will be printed...<p> <input type=button value="Close Window" onClick="javascript:window.close();"> </p></p></center></div> <div id="content" class="content">C 25 3 12345</div> </BODY> </HTML> The foo.css: PHP Code: @media print { body { background: white; font-size: 12pt; FONT-FAMILY: Verdana; background: transparent none; } #menu { display: none; } #content { margin-left: 30px; margin-right: 0px; margin-bottom: 0px; margin-top: 0px; padding-top: 0px; padding-left: 0px; padding-right: 0px; padding-bottom: 0px; text-align: left; } } @media screen { body { font-size: 14px; line-height: 1.2 } #content { display: none; } } This piece of the div tag 'content' don't listen to me: PHP Code: margin-left: 30px; margin-right: 0px; margin-bottom: 0px; margin-top: 0px; padding-top: 0px; padding-left: 0px; padding-right: 0px; padding-bottom: 0px; I have most of them at 0px, but whatever i insert into there it doesn't change the position of the variables. Are there are other codes to define a position? Thanks for any help. Remove. First time poster here - bear with me! I've used the CSS Validation link, and have come to find the developer of the theme I'm using has some sloppy code that needs cleaning up, although I'm not so certain that's the cause of my dilemma. Let's get some basics out of the way: My current theme is supplied for WordPress (Yes, I'm using WordPress too) My current browser is Google Chrome (I experience the issue in Firefox and IE as well) I've tried requesting help on the WP forums, but they redirect posters to third-parties for assistance with what they label "fundamental formatting". I've tried several Google searches to no avail (not sure my current theme title is actually the problem) To be more specific, I seem to be having issues with excess margin/padding on my theme, and haven't a clue how to remove it. When uploading a background image, the right side of the image seems to "crinkle" and looks absolutely hideous. When I change the background color of theme (via theme settings in the WP dashboard), I can see a substantial amount of space on the right side of the screen, which appears to be an issue with excess margin or padding (not sure which, if either). I've performed at least a dozen searches, and haven't been able to find a solution to the problem, let alone someone with the same issue. I should also mention I'm using a widescreen 1980x1080 resolution, however the problem persists even with a different resolution. Expanding the background image only worsens the "crinkling" and shrinking it just looks plain silly. Adjusting the background color of the site seems to help with the odd margin/padding, (rendering it invisible by giving it the same exact color as the image) - but this still leaves me unable to customize my background image further, only being able to have graphics or additional imagery on the left side. I'm not exactly the most "advanced" user of CSS. I have limited knowledge, but can typically troubleshoot the most basic issues (centering text, adjusting positioning of content, etc). If this post doesn't provide enough information, by all means, say so! You can have a look-see at my site -> ImperiumUO [dot] com. I appreciate any and all effort this community may provide in getting this annoying issue resolved. Take a look at http://actrucking.com/. I just added the orange link towards the middle of the page that says "Get a FREE Online Quote Now!!" I'd like to push it down a bit so it is more centered in the blue area, but I can't seem to get the text to acknowledge margin or padding? Here are what the styles look like: Code: #tlCallBox { background:#336799; height:75px; display:block; float:left; width:868px; margin-left:10px; position:relative; margin-bottom:30px}
#tlCallBox h2{ color:white; font-size:19px; margin: 15px 0 0 30px}
#tlCallBox p { color:White; margin-left:32px}
#tlCallBox b { margin:20px 0 0 120px; font-weight:bold; font-size:20pt}
Hi all, I've been reading this forum for a while now, but never had to post anything before. I've hit a snag whilst working on my new personal site. Its all fine in Firefox, I'm using a Wordpress engine to spit out 'posts' which are actually folio items, however IE, after the first one, the second one and every one after that have some extreme margin/padding issue so that the content area is only maybe 20px wide. www dot lucas-starbuck dot com forwardslash design is the site address, any ideas would be much appreciated! Thanks, Lucas Hi, I have this attributes left:504px; to align my picture but margin:0 0 0 387px; can be use as well. Whats the best thing to use? I am using TinyMCE and the ENTER button makes the newline and new paragraph. I read the TinyMCE docs and it says I can make the <p> attribute have a smaller gap between line by using CSS p {margin:0; padding: 0;} How do I implement this please? Here is my code for the html headers : Code:
<html>
<head><title>Strikeforce - Newsletter</title>
<!-- tinyMCE -->
<script language=\"javascript\" type=\"text/javascript\" src=\"tiny_mce/tiny_mce.js\"></script>
<script language=\"javascript\" type=\"text/javascript\">
// Notice: The simple theme does not use all options some of them are limited to the advanced theme
tinyMCE.init({
mode : \"textareas\",
theme : \"simple\"
});
</script>
<!-- /tinyMCE -->
</head>
<body bgcolor=#C0C0C0>
<font face=Tahoma size=2 color=#6A6B03>
<style type='text/css'>
<!--
A:link {color:#6A6B03; text-decoration:none}
A:visited {color:#6A6B03; text-decoration:none}
A:active {color:#6A6B03; text-decoration:none}
A:hover {color:#000000; text-decoration:underline}
-->
</style>
TIA Hi Guys, Having a problem on IE7, whereby a UL is still indenting itself, even when the padding and margin are set to zero. Anyone got any suggestions please? Charlie PHP Code: .nav{list-style: none; } .nav ul { padding: 0; margin:0; list-style: none; width:10em; z-index:99; position:relative; overflow:visible; left: 0px; } .nav li { margin:0; position: relative; float:left; width: 12em; text-align: center; color: #FFFFFF; background-color: #006699; border:solid 1px #black; display:block; height:auto; left: 0px; } |
|||||||