|
CSS - Margin Problem In Safari.. But Ok In Ie And Ff
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. 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! 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;
}
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; } 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 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 am displaying a div and want to give some space on the left side of the div so that text within div is displayed on a little distance from the left side border of the div, I am using following div style with margin but it is not working and the text is sticking very next to the left side broder Code: <div style="background-color: #82BAE8; margin: 10px 50px 30px 5px; font-family: arial; color: #000000; font-size:20; width:500px; border:thin dotted; border-width:2px; border-color: #E4E4D9; text-align: left;" > also the font size doesn't make any difference and the font size is still small. many thanks can anybody share some wise words to fix this please? Hi guys! I basically have a contain div, then, inside I have a logo div along with a 'middle' and footer div. The logo div is closed, and assigned a margin bottom property, the logo div also has a background:#FFFFFF; value. The middle div has a margin bottom value too, exactly like the logo div. All works well. But guess what, IE 6 doesn't seem to want to acknowledge these margins, and seem to want to add that margin to the navigation divs on the top and bottom of the middle div. Link: http://www.lewishamcab.org.uk/index2.php http://www.lewishamcab.org.uk/stylesheet.css Source code accessed from there as I don't know the exact problem. Hope someone can help! Regards, Joseph Man Hi to all !! check out this little piece of example code: Code: <body bgcolor="#ffffff"> <div style="width: 720px; height: 850px; background-color: gray"> <div id="leftcolumn" style="float: left; width: 500px; height: 780px; text-align: left; background-color: #F4F4F4"> </div> <div id="rightcolumn" style="height: 780px; text-align: left; background-color: red"> </div> </div> </body> In IE, between the left and right columns, there is an empty space of 5 px, that has to me no explanation. In Netscape everything is fine, the left column is next to the right one. Setting the padding and margin to 0 won't correct the problem. You can set the right margin of the left column to "- 5px". This will solve in IE, but will mess everything up in Netscape. Question: is this an IE bug I just have to live with, or am I missing out on something...? Thanks for your help and bye 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 If I have 2 tables in a div, does margin-top position the bottom table in relation to the top of the div or the bottom of the top table? My top table is absolute positioned top 0px, with a margin-bottom of 50px. The bottom table is positioned relative and has a top-margin of 50px, but is positioned relative to top of the div. Should it be positioned relative to the top table or do I need to put both tables in seperate divs to achieve the margin? I have two divs on a page. Neither div has a set height. I want to maintain a 50px vertical gap between them, regardless of the height of the top div. Can I achieve this with margins? I've tried using a bottom margin on the top div and a top margin on the bottom div, but the top margin of the bottom div seems to be positioning relative to the top of the top div, not the bottom of it. Can someone point out where I'm going wrong with this? Thanks 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! 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 i have a style sheet which says form should have no margin/paddings at all.. now the problem is that i have a form and i use: <form style="margin-top:12em; padding-top:12em;" > however if i use a value of anything <12 it doesnt move down one tiny bit, for 12em it will move down a bit (about 2em) and if i set it to 14 then it will move down more (about 5em). the form in question has an image & a hidden field. which have margin:0, padding0 applied to them, but my GUESS is it doesnt matter what they have because i am telling form to move down so all elements within it should move down as well but still be margin:0 etc? or am i reading/thinking it wrong? hi, i'have only very basic idea of CSS i'm making a site. It has horizontal scrollor using jquery and very large gap between scrollor and content "Welcome to prince electronic". Please someone help me to reduce the space between these two. website is princelondon.com thank you very much... Hi guys, I'm at the end of my rope about this. I have a three-column layout which is behaving fine in mozilla. IE, as usual, is causing problems. I've given the troublesome column a background color of yellow to emphasize the problem. There's a right padding sort of thing going on that's forcing the right-most column out of its place; might be easier if you just look at it: http://www.teamsnowvalley.com/home.php (still a work in progress. just sayin) the css behind the column: #content .left { float:left; padding-right:9px; background:yellow; width:179px; voice-family: "\"}\""; voice-family:inherit } html>body #content .left { width: 179px; } Can anyone tell what i'm doing wrong? Many thanks, M I am useing this css code : Code:
a.buttonlike:link, a.buttonlike:visited,
a.buttonlike:hover, a.buttonlike:active {
text-decoration:none;
vertical-align:middle;
background-color:#dddddd;
color:#000000;
height:16px;
padding:3px;
margin: 0px 2px 0px 0px;
border-left:1px solid #ffffff;
border-top:1px solid #ffffff;
border-right:1px solid #000000;
border-bottom:1px solid #000000;
text-align:center;
font-size: 12px;
}
to make the "buttons" on the right side of this page : http://tampabay-online.org/eventdet...erby=firstnames but when I change the margin top (because it doesn't quite fit right from Code: margin: 0px 2px 0px 0px; to Code: margin: anythingpx 2px 0px 0px; it doesn't seem to make a differance, it stays right where it is. and adding a <br /> to the line before it makes the "buttons" too far down. Any ideas? Thanks Hi.. I have a small problem with a site I'm doing right now... I have an exact order on how it's supposed to be done.. So even though it looks like **** :P.. Not my fault.. I'm not allowed to change it.. So **** that.. But.. look at this first: Dansk Auto Montage - Diesel Optimering Here.. look at the page in 1024x768... Then.. change your resolution to something higher (as high as possible).. You will notice, that the higher the resolution, the lower the logo at the bottom will get... another problem.. if you look at this page: Dansk Auto Montage - Profil The text will be kinda weird depending on the resolution... So here is what I want..... The logo should be right underneath the text (like the first page at 1024x768, in IE)... no matter which resolution you use... The text should NEVER go further right than the background line at the top (the grey horizontal thing)... No matter which resolution (still in IE).... I've tried for quite some time.. I can't make it work... Help me |
|||||||