|
CSS - Safari Seriously Screws Up Margins
Can anyone please tell me why Safari can't deal with these margins properly?
EDIT: Fixed. Removed link. Similar TutorialsI am having trouble getting safari to recognize my negative margins. It works in IE6,7 and Firefox. I am trying to center the page but to get the first 327 pixels on the left and last 327 on the right to be a negative margin and my center column to have a 1000px fixed width. Here is my css. Any help would be great! .bkg-tile-left { background-image: url(/images/bkg-tile-left.jpg); background-repeat: repeat-y; width: 327px; text-align: left; float: left; overflow: visible; } #bkg-tile-right { background-image: url(/images/bkg-tile-right.jpg); background-repeat: repeat-y; width: 327px; background-position: right; text-align: right; float: right; clear: both; padding-right: -327px; } #bkg-right { background-attachment: scroll; background-image: url(/images/bkg-img-right.jpg); background-repeat: no-repeat; background-position: left top; height: 100%; } #bkg-left { background-attachment: scroll; background-image: url(/images/bkg-img-left.jpg); background-repeat: no-repeat; background-position: right top; height: 100%; } #box1 { margin-left: -327px; margin-right: -327px; position:relative; } AND HTML <body> <div align="center"> <table border="0" cellpadding="0" cellspacing="0" id="box1"> <tr> <td valign="top" class="bkg-tile-left" height="100%"><div id="bkg-left"><IMG SRC="images/spacer.gif" WIDTH=327 HEIGHT=718></div></td> <td valign="top"><table id="Wrapper" cellpadding="0" cellspacing="0"> <tr> <td id="print_header"><dtml-var standard_print_header ><img src="images/spacer.gif" width="1px" height="1px"></td> </tr> <tr> <td><dtml-var standard_html_header2></td> </tr> <tr> <td><table width="100%" cellspacing="0" cellpadding="0"> <tr> <td valign="top" id="BreadCrumb"><dtml-var standard_html_breadCrumb></td> </tr> </table></td> </tr> <tr> <td valign="top"><table border="0" cellspacing="0" cellpadding="0" width="100%"> <tr> <dtml-if standard_html_sidebar> <td valign="top" id="body_content2"><dtml-var body_content2></td> <td valign="top" id="Sidebar2"><dtml-var standard_html_sidebar2></td> <dtml-else> <td valign="top" id="body_content2"><dtml-var body_content2></td> </dtml-if> </tr> </table></td> </tr> <tr> <td id="Footer2" ><dtml-var standard_html_footer2></td> </tr> </table></td> <td valign="top" id="bkg-tile-right"><div id="bkg-right"><IMG SRC="images/spacer.gif" WIDTH=327 HEIGHT=718></div></td> </tr> </table> </div> </body> Hi! 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. I am trying to develope http://www.hotlinkforums.com/, but why does the doctype that is generated by the forums screwup my styles. When I take it out of my homepage it makes my stylesheet work correctly, but when I use it it doesn't. Does it matter if I don't use the doctype? Will that screw up search engine ranking or anything? Also what the heck is all of this in my homepage?: <html dir="ltr" lang="en"> <head> <meta http-equiv="Pragma" content="no-cache" /> <meta http-equiv="Expires" content="-1" /> <meta http-equiv="Cache-Control" content="no-cache" /> <title>HotLink Forums - powered by vBulletin</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <meta name="generator" content="vBulletin 3.0.0 Release Candidate 3" /> <meta name="keywords" content="vbulletin,forum,discussion,bulletin board,hotlink,hosting,linux,vb,domains,reseller,affordable,cheap" /> <meta name="description" content="Message Boards for HotLink Hosting" /> Does the direction and lagnuage statements in the html tag matter towards anythign important? What do all these weird meta tags such as pragma, expires, cache-control, generator do and do I need them there? Do the meta tags below the title need to be below the title because I know I can put them above it with the others. Also, why is there a blank white space at the top of the forums? And why does the background to my td at the bottom not work? im using (stripped most) CSS: Code:
h3 {
margin-top:-10px;
}
in this HTML Code: <h1>Header</h1> <h3>subtitle</h3> i want the <h3> the overlap the <h1> partly, like defined in the CSS. It works fine in every browser, but in IE, the rest of the page is distored because of the negative margin definition. is there any workaround for this i have hit a brick wall in the development of this site i began working on several hours ago. i did not create the template or slice the images up.. i only wrote css + xhtml code. here is what it looks like.. one in ff and one in IE.. http://i39.tinypic.com/35hicki.jpg http://i41.tinypic.com/2wrq1d1.jpg xhtml: Code:
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- 'About' Page -->
<!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" lang="EN">
<head>
<link rel="stylesheet" type="text/css" href="styles.css" />
<title>Professor Fountain's Cabinet of Wonder -- About</title>
<!-- Need to add Meta Tags -->
</head>
<body>
<div id="container">
<!-- Lets try setting up the left side of the page first. The way this is sliced will most likely mean the entire top banner will also need to be set up first. -->
<!-- Here is the Banner -->
<div id="banner_container">
<img class="top_banner" src="images/index_01.gif" alt="Professor Fountain's Cabinet of Wonder - Top Banner" />
</div>
<!-- Next is the left part of the page... -->
<div id="leftside_container">
<img id="leftside" src="images/index_02.gif" alt="Cabinet of Wonder - Left Side" />
</div>
<!-- Next is the Navigation Bar -->
<div id="nav_container">
<ul>
<li class="nav_item"><a href="about.html"><img class="nav_item" src="images/working_03.gif" alt="Main Navigation - About" /></a></li>
<li class="nav_item"><a href="history.html"><img class="nav_item" src="images/working_04.gif" alt="Main Navigation - About" /></a></li>
<li class="nav_item"><a href="performances.html"><img class="nav_item" src="images/working_05.gif" alt="Main Navigation - About" /></a></li>
<li class="nav_item"><a href="contact.html"><img class="nav_item" src="images/working_06.gif" alt="Main Navigation - About" /></a></li>
<li class="nav_item"><a href="links.html"><img class="nav_item" src="images/working_07.gif" alt="Main Navigation - About" /></a></li>
</ul>
</div>
<!-- END OF NAV BAR -->
<!-- Next is the right part of the page... -->
<div id="rightside_container">
<img id="rightside" src="images/index_08.gif" alt="Cabinet of Wonder - Left Side" />
</div>
<!-- END OF RIGHT PART OF PAGE -->
<!-- Background of cabinet -->
<img class="bg_image" src="images/index_09.gif" alt="The background of Professor Fountain's Cabinet" />
</div>
</body>
</html>
css: Code:
body { lowest
z-index : -3 ;
display : block ;
background-color : #D2B48C ;
margin-top : 10px ;
margin-left : 10px ;
width : 99% ;
}
h1.content_heading {
}
#container {
display : inline ;
margin-top : 0px ;
margin-left : 0px ;
width : 917px ;
height : 697px ;
position : relative ;
left : 10px ;
top : 10px ;
}
img.bg_image {
z-index : -1 ;
display : inline ;
position : relative ;
top : -481px ;
left : 109px ;
width : 710px ;
height : 481px ;
}
#banner_container {
display : inline ;
height : 220px ;
width : 99% ;
position : relative ;
top : 10px ;
left : 10px ;
}
img.top_banner {
display : inline ;
height : 220px ;
width : 917px ;
}
#leftside_container {
display : inline ;
position : relative ;
left : 10px ;
top : 4px ;
width : 109px ;
}
img.leftside {
display : inline ;
width : 109px ;
height : 550px ;
}
#nav_container {
z-index : -2 ;
display : inline ;
position : relative ;
left : -45px ;
top : -477px ;
height : 48px ;
width : 695px ;
}
div#nav_container ul {
display : inline ;
white-space : nowrap ;
}
div#nav_container li.nav_item {
display : inline ;
width : auto ;
list-style-type : none;
}
div#nav_container img.nav_item {
display : inline ;
border : medium ;
}
#rightside_container {
display : inline ;
position : relative ;
top : 3px ;
left : -55px ;
}
img.rightside {
display : inline ;
width : 109px ;
height : 550px ;
}
this is the first time i am ever attempting such a project. Hi, I'm having a strange problem. I finally got my layout designed so that it works in both IE and FF and will work scale correctly in relation to screen resolution but now with one aesthetic defect. I have it set up so that the side navigation and the body are scaled 25%:75% but I would like a "thin solid" border between the two. My problem is that when i add the border it exceeds 100% and pushes the main content area underneath the menu. Heres the code for the page; and yes the styles will eventually be moved to the external CSS. right now the only thing the external CSS provides is the body's background image. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title> TEST PAGE 2 </title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" > <link rel="stylesheet" type="text/css" href="stylesheets/default.css"> </head> <body> <!-- LOGO ROW --> <div id="logorow" style="background-color: #FFFFFF; height: 100px; border-bottom: medium solid #7D5D10;"> <img src="/Images/owlstreelogo.jpg" height="100px" width="300px" alt="Welcome to Owl's Tree"> </div> <!-- END OF LOGO ROW --> <!-- TOP NAVIGATION ROW --> <div id="topnavigationrow" style="background-color: #FFFFFF; padding: 0px 0px 0px 0px; font-weight: bold; text-align: center; border-bottom: thin solid #7D5D10;"> INSERT TOP NAVIGATION ROW LINKS HERE </div> <!-- END OF TOP NAVIGATION ROW --> <!-- CHANGING CONTENT AREA --> <div id="changingcontent" style="background-color: #FFFFFF;"> <!-- SIDE NAVIGATION AREA --> <div id="sidenavigation" style="background-color: #FF0000; width: 25%; float: left;"> </div> <!-- END OF SIDE NAVIGATION AREA --> <!-- BODY CONTENT AREA --> <div id="bodycontent" style="background-color: #0000FF; width: 75%; float: left;"> </div> <!-- END OF BODY CONTENT AREA --> </div> <!-- END OF CHANGING CONTENT AREA --> </body> </html> I want to add "border-right: thin solid #7D5D10" to the side navigation section but when I do i'm faced with this problem. Any idea on a solution to this problem? Oh yeah and as a side not all these sections will eventually have a white background so i'm not worried about the height of them not matching because it will be unnoticable, the sections are just colored so I can see where each section starts and ends. And another random question i'm not too worried about: If i fill a section (eg. the main content section) with a single character over and over past the width of the section without spaces it overflows and displays outside the div tags boundaries. Why does it do that? and is there anyway to make sure the text wraps in the extremely rare case this would happen? Thanks in advance to anyone reading this 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. 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? 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 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! Hey there. A friend of mine was giving me a hand with the coding for http://myspace.com/457343540 but unfortunately I can't get in contact with him atm, so I thought I'd as here. As you can see in the link provided, firefox display the margins I want, but IE throws them off a bit. I've tried a few different things, but after a couple hours I've given up trying on my own lol. Another issue is the page is obviously stretching off the page (?idk) as the scroll bar goes off the side. Code: <style>
{ Music Player Properties }
.i {display:none;}
table table td.text div object {position:absolute; top:1140px; left:50%; margin-left:-30px;}
table table td.text div object object {position:static; margin-left:0px;}
{ Background Properties }
table, tr, td { background-color:transparent; border:none; border-width:0;}
body {
background-color:000000; background-attachment:scroll; background-position:top center; background-repeat:no-repeat; background-image: url(http://bnesfinest.net/tomm/myspace/tioc/bg.jpg);
border-top-width:0px; border-bottom-width:0px; border-left-width:0px; border-right-width:0px; border-color:none; border-style:solid; padding-left:0px; padding-right:0px;}
.samohtlogo{
position:absolute; width: 100px; top: 20px; left: 20px; text-align: left; z-index: 10;}
.menu{
width: 959px; height: 136px; position: absolute; top: 591px; z-index: 2; overflow: visible; margin-left: -480px; left: 50%;}
.header {
width: 959px; height: 422px; position: absolute; top: 169px; margin-left: -480px; z-index: 0; overflow: visible; left: 50%;}
.memberstop {
width: 959px; height: 403px; position: absolute; top: 727px; margin-left: -480px; z-index: 0; overflow: visible; left: 50%;}
.thealbum{
width: 422px; height: auto; position: absolute; top: 1130px; z-index: 2; overflow: visible; margin-left: -480px; left: 50%;}
.musicbg{
width: 541px; height: auto; position: absolute; top: 1130px; z-index: 0; overflow: visible; margin-left: -62px; left: 50%;}
.shows{
width: 959px; height: auto; position: absolute; top: 1513px; z-index: 0; overflow: visible; margin-left: -480px; left: 50%;}
.reverbshows{
width: 959px; height: auto; position: absolute; top: 1550px; z-index: 2; overflow: visible; margin-left: -445px; left: 50%;}
.featvideo{
width: 959px; height: auto; position: absolute; top: 1535px; z-index: 2; overflow: visible; margin-left: -50px; left: 50%;}
.R { Div Counter Acts }
.friendSpace div { overflow:visible !important; height:auto !important; position:static !important; background:none !important; }
.friendsComments div { overflow:visible !important; height:auto !important; position:static !important; width:auto !important; background:none !important; }
html body.bodyContent table tbody tr td table.friendsComments tbody tr td.text table tbody tr td table tr td{
background-color: !important; text-align: left; vertical-align: top; overflow: visible !important; font-size: 11px !important; line-height: 12px !important;
text-transform: none !important; text-align: justify; letter-spacing: 0px; color: e7e2c5!important; margin: 10px !important; padding: 20px 20px 12px 0px;
border-bottom: 1px dotted dimgrey !important; border-color: 50433d!important; _line-height: 16px !important; }
html body.bodyContent table tbody tr td table tbody tr td.text table.friendSpace tbody tr td.text table tbody tr td table tr td table tr td a{
width: 110px !important; overflow: hidden; letter-spacing: 0px; font-size: 10px !important; line-height: 12px; display: block; color:50433d!important;
margin: 0 !important; padding: 0 !important; text-align: center !important; margin-left: 1px !important;}
.friendSpace {
position: absolute !important; z-index: 4 !important; width: 800px !important; margin-left: -320px; _margin-left: -400px; top: 0px !important; margin-top: 1860px !important;
}
.friendsComments {
position: absolute !important; z-index: 6 !important; margin-left: -35px; _ margin-left: -400px; width: 833px !important; top: 0px !important; margin-top: 2755px !important;
}
.friendsComments a img {border: 3px; border-color: 50433d; border-style: solid;}
.friendsComments table {width: 800px; align: justify; position:relative; left:0px; }
.friendSpace a img {border: 4px; border-color: 50433d; border-style: solid;}
</style>
Hi All, I am very new to CSS and i am working on preparing a document of an existing CSS. Can someone tell me if the margins are set as this, margin:0px 31px 0px; Is it top,right and bottom? Thanks Prena Anyone know why the margins change on the links when I hover over them with IE. (check left column navigation) http://section31.us/temp/tortilla/tortilla.html Note: This works fine on firefox, but goes ape**** on IE. 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> 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 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! 'Ello, I have a slight problem with some CSS I am using, it works perfectly fine in other browsers but in IE 6 it doesn't. What I basically want is the body of the page to have a 10pixel margin on the left and right of the page and 0 at the top and bottom, this bit I can do. I also want everything on the page to stretch from the end of each margin (so they basically start 10 pixels in from the left and 10 pixels in from the right), which I have got working fine. Now what I am trying to do is have one div layer stretching from the very left to the very right of the page and I am getting a bit stuck on it. What I have managed to do is set that div layer to be absolute positioning so I can use "left: 0px;" to get it all the way up against the left hand edge, but how can I get it right up against the left hand edge? I am sure if I set it to be the width of the page so for example if the page is 500 pixels wide and I use "width: 500px;" it would go from end to end, but what I want is it to go from end to end no matter what the width of the window is. For the rest of the layers that are not going from end to end but are staying within the body margins I used "width: 100%;" which works fine, but when I try it with the one that I want to go from end to end it only goes up to the body margin, but right to the end, well in IE it does anyway other browsers are fine with it. Does anyone know how to get around this? I have tried looking on the net but I can't find anything on it. All help will be greatly welcome. Thank you in advance, El Barto. 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; } |
|||||||