|
CSS - Ie Ignoring Css Margins
Hello.
I'll preface this by saying that it's probably a common problem with a simple solution, but I've searched all over the net for a solution and come up empty. It's very possible that I'm using the wrong search terms, however. Anyway, on to the issue I'm having. I recently rebuilt a page using CSS with divs -- prior to that it had been using several nested tables and the code was getting pretty unwieldy -- and it looks great in most of the latest browsers. Except, of course, IE. The way the page is set up, I have two container divs floated left, each one using 48% of the available width, with a 1% margin on each side. It looks perfect in every browser except for IE. In IE it seems that the only style definition that it cares to acknowledge is the float left, so both container divs get forced together on the left side with no space in between. It's not unreadable, but it's not what i want either. Here's the style definition: Code: .newsTypeSection{
width:48%;
float:left;
margin-right:1%;
margin-left:1%;
display: inline;
}
the display:inline; was something i added later as it seemed to be a proposed fix from another site. It didn't make a difference that I could see, so I just left it. Here's an image that shows the difference. The top example is what it should look like. It looks perfect in every browser but IE. URL The bottom is what shows up in IE8, and probably other version of IE as well. Can anyone help me with this? It's beyond frustrating. Please let me know if you need more information. I can't link to the page because it's not public at the moment. Similar TutorialsHi! Could some experienced CSS developer please confirm this: All paddings, and right and left margins, always combine (what I mean is if you have a left object with a 5px right margin and a right object with a 5px left margin, the distance between the two will be 10px). However, bottom & top margins never combine. Is all this true? I am having a problem where I have a <div> that holds my body image, margin: 0 auto; Inside that is my content <div> with margin:15px; but this is visually dropping the background image's margin by 15px. The problem compounds every time I add another margin/padding requirement into the rest of the <div>. Code: html, body {
margin:0px;
padding:0px;
background-image:url(images/interface/background.png);
}
#body_image {
width:935;
margin:0 auto;
padding:0px;
background-image:url(images/interface/body.png);
background-repeat:no-repeat;
background-position:center;
}
#container {
width:904px;
height:750px;
margin:15px;
}
#slug {
height:15px;
}
Code: <div id="body_image"> <div id="container"> <div id="header">Header</div> <div id="nav">Nav</div> <div id="sidebar">Sidebar</div> <div id="content">Content</div> <div id="footer">Footer</div> </div> </div> The extent of my CSS is a few tutorials online and the class I took 10 years ago where the teacher said "Here's CSS, you can't do much more than change your font size and color with it... on to tables!" Thought it'd only be fair to give you a little background. Hi All, This seems to be a bit of a recurring problem for me in a lot of the new CSS designs I'm trying... but it seems that IE interprets both padding and margins differently than how firefox interprets them. Sometimes it seems to do it the same, and other times differently. Take a look at this: http://zeroonedesign.com/beta/newsite/index.html CSS he http://zeroonedesign.com/beta/newsite/style.css Now look at it first in Firefox (the desired effect) and then in IE. IE seems to be incapable of understanding this particular piece of the code Code:
#menu {padding-top:140px;text-align:left;padding-left:38px;}
#menu ul{margin:0px;}
#menu ul li{display:inline;margin-right:10px;padding:5px 7px 5px 7px;color:#fff;}
#menu ul li a{color:#fff;font-size:10pt;text-decoration:none;}
#menu ul li a:hover{color:#fff;font-size:10pt;border-bottom:3px solid #fff;}
#menu ul li a.selected{color:#f88000;font-size:10pt;border-bottom:2px solid #f88000;}
Ideas? Help? I know the box model is different for IE than it is for FF but I've tried the box model hack and it doesn't seem to do anything. For the life of me, I can't figure out what is causing this problem. One of my sites (www.whyilovechicago.com) has a blog that I host on Blogger. I customized the blog layout to look exactly like the rest of the site, going as far as to call all of the CSS and images from my hosted domain. I have an unordered list displayed inline across the top of the content. In Firefox, both the blog and the website look fine. However in IE, the website looks fine BUT the blog displays the navigation links on separate lines. If the CSS is the same (I'm calling the same file), WTF is going on here? I'd appreciate if someone could take a look and see if I'm missing something... 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.... Hello All! I started making a website and I have run into a problem with some code. I am trying to put the paypal donation code on my site with an image, unfortunately the paypal code is ignoring the css and the image is not displaying with a border around it. :P My site: www.looniefrugal.com The image is on the far right column under the RSS image. Note how the RSS has a border and the Coffee image does not. Here is the code for that column Code: <div id="tertCol"><?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(2) ) : ?>
<?php endif; ?>
<div id="elseWhere">
<h3>Before you go</h3>
<p>I dare you to... </p>
<ul id="imgLinks">
<li><a href="http://feeds2.feedburner.com/LoonieFrugal" title="Subscribe to LoonieFrugal.com"><img src="<?php bloginfo('template_directory'); ?>/images/guide/rss.gif" alt="Subscribe - RSS" /></a></li>
<li>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_donations">
<input type="hidden" name="business" value="elina_1985@hotmail.com">
<input type="hidden" name="lc" value="CA">
<input type="hidden" name="item_name" value="Loonie Frugal">
<input type="hidden" name="item_number" value="Coffee">
<input type="hidden" name="currency_code" value="CAD">
<input type="hidden" name="bn" value="PP-DonationsBF:coffee.gif:NonHosted">
<input type="image" src="<?php bloginfo('template_directory'); ?>/images/guide/coffee.gif" name="submit" alt="Coffee Time!">
</form>
</li>
</div><!-- close #imgLinks -->
</div><!-- close #tertCol -->
And here is the Style code Code: ul#imgLinks{list-style:none;margin:7px 0;}
#imgLinks li{color:#7F7F7F;line-height:1.2em;padding:0 0 1px;}
#imgLinks li a img{border:3px solid #EEE;width:208px;height:69px;color:#333;font-weight:bold;}
#imgLinks li a:hover img{border-color:#DDD;}
Thanks for any help with this. I am new to code :P 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? 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>
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. I have an odd situation where the box for an anchor in a menu is extraordinarily large . . . IN MOZILLA! IE works as expected & displays correctly, but the Mozilla box is triggering the :hover half way in the content area! (See attachment) I'm a little baffled on this box situation, EVEN INCLUDING the box-sizing changes for both IE/Moz (box-sizing: border-box & -moz-box-sizing: border-box), still doesn't resolve the problem. Any feedback is greatly appreciated! Here is the relevant CSS: Code: body, html
{
min-width: 700px;
background: url(/_test/images/nav-filler.gif) repeat-y;
height: 100%;
font: 1.2em Verdana;
line-height: .8em;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
p, a, div
{
font-size: 76%;
padding: 0 10 0 0;
box-sizing: border-box
-moz-box-sizing: border-box;
}
#header
{
position: absolute;
top: 0;
left: 0;
margin: 0 0 0 0;
padding: 0 0 0 0;
z-index: 200;
/*border: 1px solid #0F2B5B;*/
}
#header-right
{
position: absolute;
top: 0;
right: 0;
z-index: 100;
width: 100%;
background: url(/_test/images/header-filler.gif) repeat-x;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
#content
{
position: absolute;
top: 154;
left: 163;
z-index: 300;
margin: 0 0 0 0;
padding: 0 10 0 0;
}
#left-nav
{
position: absolute;
top: 154;
left: 0;
right: 163;
margin: 3 0 0 0;
padding: 0 0 0 0;
max-width: 163;
display: block;
}
#nav-links
{
margin: 0 0 0 0;
padding: 0 0 0 0;
width: 133;
}
#left-nav a
{
color: #000000;
font: 69% Verdana;
background: url(/_test/images/nav-item3.gif) no-repeat 0px 0px;
margin: 0 0 0 0;
padding: 0 17 4 29;
width: 155;
text-decoration: none;
display: block;
box-sizing: border-box
-moz-box-sizing: border-box;
}
#left-nav a:hover
{
color: #FF0000;
background: url(/_test/images/nav-item3.gif) no-repeat 0px -50px;
}
#left-nav a:active
{
color: #FF0000;
background: url(/_test/images/nav-item3.gif) no-repeat 0px -100px;
}
#left-navContent
{
color: #000000;
font: 66% Verdana;
width: 163;
background: url(/_test/images/nav-item-filler.gif) repeat-y 0px 0px;
margin: 0 0 0 0;
padding: 0 30 4 29;
text-decoration: none;
}
.nav-itemBottom
{
margin: 0 0 0 0;
padding: 0 0 0 0;
}
.nav-header
{
color: #0F2B5B;
font: bold 80% Verdana;
margin: 00 20 0 0;
padding: 7 0 6 32;
width: 163;
text-decoration: none;
display: block;
}
#nav-headerType1
{
color: #0F2B5B;
background: url(/_test/images/nav-header.gif) no-repeat 0px 0px;
}
#nav-headerType2
{
color: #0F2B5B;
background: url(/_test/images/nav-header.gif) no-repeat 0px -30px;
}
#nav-headerType3
{
color: #FF0000;
background: url(/_test/images/nav-header.gif) no-repeat 0px -60px;
}
#nav-headerType4
{
color: #0F2B5B;
background: url(/_test/images/nav-header.gif) no-repeat 0px -90px;
}
#nav-headerType5
{
color: #FF0000;
background: url(/_test/images/nav-header.gif) no-repeat 0px -120px;
}
according to the css 2.1 spec if you specify the margin/padding of an element in ems then it takes the measurement from that element's font size, this means that * { font size: 1em; } h1 { font-size: 1.5em; margin-bottom: 1em; } gives h1 a margin of ... 1.5em ... which sucks. and is counter intuitive IMO. how is one supposed to go about having fixed margin spaces when using scalable fonts? now i know that margins overlap so theoretically setting p { margin-top: 1em; } instead would work, but only where a p lies under a h1. if i had a h1 then a h2 then a p then how large would the gap be between the h1 and the h2? and how would i control that reliably? the only way around this i can think of is this * { font-size: 1em; /*let's say this equates to 10px on the device it's being viewed on*/ } h1 { font-size: 1.5em; /*...then this would be 15px*/ margin-bottom 0.67em; /*..this would be 67% of 15px = 10px!*/ } h2 { font-size: 1.2em; /*12px*/ margin-bottom: 0.83em; /*83% of 12px = ... 10px!*/ } p { margin-botton: 1em; } Now, when i scale the font size all the margins should scale in accordance with the <p>. at least, according to my understanding of the spec. i'll try it in the next couple of hours (first thing monday morning just got to work)... anyone else thought of a scalable friendly alternative? I thought I had this worked out before with the help of this forum, but it seems to be back again! In IE 6 (and maybe others, who knows. I am running Ubuntu =/ ) there is a big gap between the top horizontal nav and the comic. http://www.jjsunshines.com/ Any help would be greatly appreciated! I'll even trade you php help! I'm working on a set of tabs within tabs (or subtabs). My code is something like this: Code: <ul class="tabs"
<li class="selected">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<div class="tab_content">
<ul class="subtabs">
<li class="selected">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
Now, "tab_content" has padding of 10px, because the subtabs won't always be there. But I don't want the padding on the subtabs, so I was giving them a negative margin of -10px. This works in all browsers but IE, which applies everything but the right margin, leaving a white gap. See the image I'm attaching to see what the problem looks like. Anyone know of easy fixes for this? I am having a problem with negative margins in IE7. On my website: commentsandcapers I am trying to get IE7 to display the right two boxes in the same way that Firefox displays them?? I have tried a few thing including position: relative in a whole bunch of places, none of which works. Do any of you have any idea how to correct this problem? Thanks! Hello, I have been having some problems with ie and auto margins, In firefox my page shows perfectly, but in ie, the page hangs to the left only showing the default margin that ie gives you. I want the page to center in the middle. The link to the page is spanglerdesign.com/test/Mulligan1 Hey, I am currently learning how to do layouts in pure CSS and am running into a few problems. Some of these i've cleared up, but i'm still learning obviously. My currently issue is that margin / top settings are not consistent throughout browsers. Example: in FF/Mozilla a margin setting or "top" pixel setting is "lower" than in IE. The reason for this is, apparantly, when margins are set to zero my lower div table actually rides up "under" the above div's bottom border, this creates an offset of 5 pixels when setting margins, etc. Whereas, in IE, the div sits directly beneath the 5px border, as I would assume it should. Here are the files i'm using: 1) Webpage: http://www.binjured.com/index2.php 2) CSS File: http://www.binjured.com/style2.css important css (as i see it) a #nav, .top, .main (these are all near the bottom of the file, if you wish to skip extraneous code). I am trying to understand WHY css does the things it does and how I can make it do the right thing. Any help would be extremely appreciated. Finally, there may be some extraneous code that those who know css, know does nothing. It's in there because I am trying to "debug" it but i'm completely lost for the answer now . I have a couple of problems. 1) I have an unwanted margin around my page. I have tried and searched everything I could to get rid of it and I cannot. Ca someone please explain why it is doing this? 2) No matter how hard I try, the Navigation list will not move to where I would like it to go (Centered in the grey area). What am I doing wrong? Code below 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=utf-8" /> <link rel="stylesheet" type="text/css" href="./CSS/style1.css" /> <title>Cakefaced - Miles out of the box</title> </head> <body> <div id="Banner" /> <div id="Logo" /> <div id="NaviRear" /> <ul class="NaviLink"> <li class="NaviLink"><a class="NaviLink" href="index.html">Home</a></li> <li class="NaviLink"><a class="NaviLink" href="index.html">Projects</a></li> <li class="NaviLink"><a class="NaviLink" href="index.html">Geuestbook</a></li> <li class="NaviLink"><a class="NaviLink" href="index.html">Profile</a></li> </ul> </div> <div id="Blog" /> <div id="Links" /> </body> </html> CSS: Code:
@charset "utf-8";
/* CSS Document */
/*CSS Sheet Copyright(C) 2011 to Cakefaced.co.uk All Rights Reserved
This style sheet cannot be used without permission from Cakefaced.co.uk Administrator */
/*
-----------------------------------------------------------------------------------------------
Begin Banner Styling
-----------------------------------------------------------------------------------------------
*/
#Banner {
background-image:url('../Images/BannerRear.jpg');
background-repeat:repeat-x;
height:200px;
margin:0;
position:relative;
}
/*
-----------------------------------------------------------------------------------------------
End Banner Styling
-----------------------------------------------------------------------------------------------
*/
/*
-----------------------------------------------------------------------------------------------
Begin Navigation Styling
-----------------------------------------------------------------------------------------------
*/
#NaviRear {
background-image:url('../Images/NaviBack.jpg');
background-repeat:repeat-x;
top:150px;
height:60px;
margin:0;
position:relative;
}
ul.NaviLink {
list-style-type:none;
margin:0;
}
li.NaviLink {
display:inline;
bottom: 10px;
position:float;
}
a:link.NaviLink {
font-size:1.875em;
color:#000000; /* unvisited link */
font-family:"Arial Black", Gadget, sans-serif;
}
a:visited.NaviLink {
color:#000000; /* visited link */
}
a:hover.NaviLink {
color:#FF00FF; /* mouse over link */
}
/*
-----------------------------------------------------------------------------------------------
End Navigation Styling
-----------------------------------------------------------------------------------------------
*/
I've got two child divs nested in a parent div. They are shown below. The problem I am having is that in IE 5.x for Mac, the top margins do not work, while the left margins are applied properly. The following script works just fine in: safari, mozilla, firefox, opera, netscape, etc. It is only in IE for mac that the top margin is not applied and the two children are positioned improperly. If anyone knows of any fixes, hacks, or just sees some junk in my code, please let me know. All help is greatly appreciated! #parent { width: 700px; height: 66px; } #child1 { width: 288px; height: 56px; margin: 8px 0 0 10px; background-image: url(whatever); background-repeat: no-repeat; float: left; } #child2 { width: 115px; height: 40px; margin: 14px 0 0 165px; background-image: url(whatever); background-repeat: no-repeat; float: left; } Why doesn't the following code result in a blue border that is 10px wide? PHP Code: <Table> <tr> <td style="background-color: 0000FF;"> <Table> <tr> <td style="background-color: FF0000; padding: 10; margin: 10; border: 10px solid #00FF00;"> Test Font </td> </tr> </Table> </td> </tr> </Table> |
|||||||