|
CSS - Safari <li> Margin Issue?
This main navigation does not display properly in Safari and I was hoping somone might be able to tell me why
http://hometown.tmhdesign.com Similar TutorialsBackground 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;
}
I'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? I cannot see a margin when I test this page in safari from dreamweaver. Basically I am trying for a centered container which will hold all the content and have some space from the top margin and be centered. With the CSS I have the container shows up with a margin when I test it in the firefox browser and even when using live view, but not in Safari. The latest version of Safari. What do I need to change to get the top margin to show correctly in Safari? Is something overriding something else? Code @charset "UTF-8"; /* CSS Document */ body { color: #000000; /*This sets all text to Black*/ /*background-color: #FFFFFF; /*This sets the bacground to white*/ margin: 100px auto; /*This sets the margin to zero*/ padding:0; font-size:12px; font-family:Verdana, Arial, Helvetica, sans-serif; text-align:center; } p { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #000000; } h1 { font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #000099; } h2 { font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #000099; } h3 { font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #000099; } .redtext { color: #FF0000; } a { color: #009900; } a:link { color: #000099; text-decoration: underline; } a:visited { color: #666666; text-decoration: none; } a:hover { text-decoration: none; background-color: #CCCCCC; } a:active { text-decoration: none; } .menu { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #000000; } .menu a:link { color: #336600; text-decoration: none; } .menu a:visited { color: #666666; text-decoration: none; } .menu a:hover { color: #990000; text-decoration: none; } .menu a:active { color: #666666; text-decoration: none; } div#container { width: 960px; height:760; /*margin-left:0 auto; /* the auto value on the sides, coupled with the width, centers the layout */ } div#outer { margin-left: auto; margin-right: auto; width: 960px; } div#header { position:relative; text-align: center; width: auto; } div#nav { width: auto; padding: 10px; margin-top: 1px; position:relative; } div#main { position:relative; width: auto; } div#footer { position:relative; width:auto; padding: 15px; margin: 0px; }#nav { position: relative; padding:20px; width: auto; } Was hoping someone could help me with a problem I'm having with margins on this site robertehowarddirectory.com/viewcat.php?category=Art In safari, the margins between each of the "featured" listings is 30px when it should be 8 (4 on the top of each listing, and 4 on the bottom). This jacks up the layout of the site, pushing the featured listings too low, as you can see. IN IE 7, 8 and Firefox, I have no problems, and the site displays fine. Would appreciate any help on this issue, as I've been trying to solve the problem but have not found a solution. Thank you. So, 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! 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! Greetings, The following webpage works in firefox but not in ie: http://resonantprogramming.com/homen.html For some reason the menu does not show up correctly. I want the menu to show up within the top gradient graphic, but ie doesn't like that for some reason. I did alter the z-index value to no avail. Any ideas? Thanks 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 I've got an "IE" issue! This CSS code looks perfect in IE7 and Firefox. It is a photo box that offsets 225 pixels to the left of the text box. Code: #inside_offset_image {
width: 319px;
float: left;
margin-left: -225px;
margin-right: 30px;
margin-bottom: 30px;
}
But when I test in IE5.5 and IE6, this photo box runs almost completely off the left side of the browser. The actual test page is located he http://penncomm.com/bean/inside.html Any ideas? Remove. Hello, first post here =) I'm having a margin/border problem where it is showing up the way I want it to in IE but not in FF. Here is the URL: http://www.prj2501.com Here is the CSS: http://www.prj2501.com/puppetmaster.css DOCTYPE is XHTML-STRICT In IE you will notice the extra border below the nav followed by the padding for the content ID which places the H3 where I want it. In FF, the border and the padding are both gone. In trying to debug this, I notice nothing I do above the H3(padding,margin,etc.) takes effect in FF...yet left and right padding do. The only way to get it to move down is BR tags and I'd rather not do that. Any ideas, suggestions? I am just now getting the hang of CSS so if you see anything glaring that does not seem best-practice, by all means point it out. Thanks in advance. 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 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}
My site displays correctly in Firefox and IE (which was hassle enough) but when I view it in Safari on my Macbook, the last nav menu item is pushed down below the rest of the menu instead of in line with the rest of the menu. I just got my macbook, and I'm not very in touch with al of Safari's quirks yet, but I was under the impression that it was more reliable than FF or IE. Does anyone have any idea what's causing this, and how I can fix it? http://www.wwu.edu/~swing Please look at this layout Layout Example In IE7 there is a gap between the footer and upper divs that I am not sure what is causing. The other issue I would appreciate help with is the #right div element. When the #content div has a higher height I want the #right div element to stretch with it (and vice versa). Any help would be appreciated. Tom http://www.bath.ac.uk/~su2photo/test.php i've been playing around with the css, trying to get the page to display properly, and i get something which i'm reasonably happy with in firefox, but as always when cross checking, ie drops the ball. this time however, the the difference doesn't seem to be consistent . The two boxes you see, should both have titles flush to the top of their containers. In ie, only one seems to manage this. html: PHP Code: <div id="menubox"> <div class="topic"> <h3>Menu</h3> </div> <div id="menubody"> <ul> <li><a href="index.php?s=1">Introduction</a></li><li><a href="index.php?s=2">Organisation</a></li><li><a href="index.php?s=3">Galleries</a></li><li><a href="index.php?s=4">Communication</a></li><li><a href="index.php?s=5">Equipment</a></li> </ul> </div> </div> <div id="mainbox"> <div class="topic"> <h3>Introduction</h3> </div> <div id="main"> <p> Text <br /><br /> Text </p> </div> </div> css: PHP Code: html, body{ font-family: Arial, Helvetica, sans-serif; font-size: 1em; color: #FFF; background-color: #000; text-align: center; } #logoimg{ border: 0px; width: 90px; height: 90px; } div#container{ position: relative; top: 50px; margin: 0 auto; text-align: left; width: 900px; } div#mainbox{ float: left; padding-bottom: 15px; border: 1px solid #290000; background-color: #130000; width: 630px; text-align: center; } div#menubox{ float: right; border: 1px solid #290000; background-color: #130000; width: 230px; text-align: center; } div#main{ margin: 0 auto; width: 600px; text-align: left; } div#menubody{ margin: 0 auto; width: 200px; text-align: left; } div.topic{ text-align: left; background-color: #290000; } h3{ padding-left: 10px; margin-top: 0; } ul{ list-style-type: none; text-align: left; } this one's got me fuzzled, any idea? (if my whole technique is all wrong, then can you suggest a better way?) cheers guys (I apologise for the length of this , i did attempt to cut it down ) Hello, I am working on a site. theweedkiller dot com I have 3 links which are being laid out using a <ul> The problem is the margin between home and service is fine, but the margin between services and contact seems to be double the size. I have tried adding display:inline; and it seemed to do nothing. I am getting this problem in Chrome, Firefox, and IE8. I am using a CSS reset too. Heres is the HTML I am using - <div id="nav"> <ul> <li> <a href="index.html" id="current">Home</a> </li> <li> <a href="services.html">Service</a> </li> <li> <a href="contact.html">Contact</a> </li> </ul> </div> <!--end of nav div--> Heres is the CSS I am using - #nav ul { margin-left:370px; list-style-type:none; } #nav ul li { float:left; display:inline; } #nav ul li a { font-family:"Myriad Pro", Arial, sans-serif; font-size:20px; font-weight:bold; color:#302013; padding:25px 50px 5px 50px; background-image:url(images/nav.png); background-repeat:no-repeat; text-decoration:none; display:inline; margin-right:10px;!important } #nav ul li a:hover { font-family:"Myriad Pro", Arial, sans-serif; font-size:20px; font-weight:bold; color:#fff; background-image:url(images/nav-over.png); background-repeat:no-repeat; text-decoration:none; } #nav #current { font-family:"Myriad Pro", Arial, sans-serif; font-size:20px; font-weight:bold; color:#fff; background-image:url(images/nav-over.png); background-repeat:no-repeat; text-decoration:none; } I have no clue why this is happening. Any help would be useful. Thanks! Hello. I just created my first web layout using DWCS4 with CSS. On desktop browsers, it view great. However, when I view it on my iphone, the divs are not connected and a line is shown. The line goes away when I pinch in to view but reappears when I zoom back out. How can I fix this? My header div and content div contains an image and are set to no borders. Hi, www.personaldevelopment.ca looks great in firefox and IE, but in konqeror/safari (i test in konq because it uses the same html rendering engine) the top left is stretched a tad further than it should. Anyone have any suggestions to fix this? I am out of ideas. http://www.uberwald.com/images/pdtop.jpg (Thanks zAlanm) Thanks. tdela |
|||||||