|
CSS - Body {margin-top: 0px } Not Working For Opera 8.02
O.k. I'm stumped...
I have a gap about 5px at the top of my site in Opera 8.02 which reveals my background graphic and setting the top margin to 0px in both my body and wrapper div does nothing to solve it. It renders fine in FF 1.06 and IE6, and yes, everything validates fine. My Website My css file My gratitude ahead of time. [edit] Did a little deeper search and solved my problem. Opera uses padding as a default, not margins. So setting padding to: Code: body {
padding: 0px /*Opera hack*/
}
Removed the gap issue [/edit] Similar TutorialsRight, so I'm very new at this CSS positioning business. All I'm trying to do is have a centered 100% tall div with some content inside it. The 100% tall div is working. Now, inside, I'm going to eventually have 3 different divs containing information. All will be centered in the large container, , be about as wide as the centered container, and they will appear one on top of the other. Right now, all I have is my title image, which is basically just a placeholder until I make the title image I want. I have it centered just fine, and its at the top obviously. The problem is, I don't want it jammed up against the top of the browser window. So, margin-top, right? When I do that, It pushed the entire page down however many pixels I make the margin. HTML: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>How To Read Basic Sheet Music ◊ Week 1: Welcome ◊ Cory Mensch</title> <link href="css.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="whiteFrame"> <div id="topTitle"></div> </div> </body> </html> CSS: html { margin: 0px; padding: 0px; height: 100%; } body { margin:0px; padding:0px; height:100%; background-image:url(Images/bg.jpg); background-repeat:repeat-x; } #whiteFrame{ background-color:#FFFFFF; margin:auto; width: 652px; min-height: 100%; } #topTitle{ width:611px; height:48px; background-image:url(Images/title.gif); background-repeat:no-repeat; margin-top: 50px; margin-left:auto; margin-right:auto; margin-bottom:auto; } Any help is greatly appreciated. My CSS works in IE and Mozilla but not Netscape or Opera I have a 2 column website, built with 2 relative position DIVs, with overflow set to auto. Because of this, I turned off overflow on the body tag and on the html tag (overflow: hidden;). I didn't want to have 2 scroll bars on the right side of the window. When I first tested this on 4 browsers, IE, Mozilla, Netscape and Opera, it worked great, only having one scroll bar on the right side of the window when the page was longer than the window height. But when I moved to a new host server recently, I discovered that Netscape and Opera stopped working. They now simply give me blank screens. When I remove the "overflow: hidden;" specifications from the body tag and the HTML tag in my CSS file, Netscape and Opera once again display my web pages. However, now I get 2 scrollbars on the right side of all 4 browsers (in IE, the second scrollbar isn't actually there, but the space holder for the scrollbar is there). Is there a cross browser way for doing what I'm trying to do? Or am I faced with detecting the browser type on the server-side, and setting the style sheet appropriately? Here are the related parts of my CSS: /* CSS styles */ BODY { font-family : Verdana, Arial, Helvetica, sans-serif ; font-size : 10pt; background : Black; color : White; margin: 0; padding: 0; border-width: 0; overflow: hidden; } HTML { overflow: hidden; } #LeftNavDIV { position:relative; width:185px; height:100%; float:left; padding:2px 0px 0px 0px; margin:0px 0px 0px 0px; border:1px solid white; overflow:auto; } #ContentDIV { position:relative; height:100%; width:75%; float:right; padding:0px 0px 0px 0px; margin:0px 0px 0px 0px; border:0px dashed #336699; overflow:auto; } Hi there, I am trying to define the body text for all my pages using this, but it is not recognising it: Code:
body{
font-family: verdana;
font-size: 11px;
color: #000000;
line-height: 150%;
}
Have I got something wrong here?! I've made a site for someone and it was center aligning and it worked in all 3 main browsers (IE, FF and Opera) so when I was tinkering with ideas for redoing the look of my site, I used the CSS sheet I used for his site as a base for mine. Unfortunately it's only center align in IE7 with my site. My site is admittedly a bit more complex, at the moment, with more divs, it should still work. Mind you I'm probably just too tired to spot the obvious. Can anyone see what's stopping it from center aligning in FF and Opera? The template: http://www.toadwarrior.com/temp/index.php The CSS: http://www.toadwarrior.com/temp/mark_h_walker_journalist.css Thank you in advance. Hi, I'm using C++ to create a single .cgi script. I'm now trying to incorperate some more CSS. I have added this line: <style>body { font-family: times-roman; font-size: 16px; font-weight: bolder; }</style> Now sometimes it works and sometimes it doesn't. I will keep on clicking the refresh button and it is about 1 out of 10 that there are not any fonts on the page and the table sizes jump. Does anyone know why this is possibly happening? Mike I have googled it and searched through this forum as well. And found pretty much the same advice. However it does not appear to work for me. My CSS file has the following: Code:
body {
padding: 0;
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
background-color: #000000;
font-size: 12px;
line-height: 15px;
text-align: center;
}
.largeLink{
font-size: 14px;
}
.bodyTextSm{
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;}
div#pageContainer{
margin-top: 5px;
margin-bottom: 5px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
...
and my php file contains: Code:
<body bgcolor="#000000" onLoad="MM_preloadImages('/images/TopNav_r1_c1_f2_online_movies.gif','/images/TopNav_r2_c3_f2_online_movies.gif','/images/TopNav_r2_c4_f2_online_movies.gif','/images/TopNav_r2_c5_f2_online_movies.gif','/images/TopNav_r2_c6_f2_online_movies.gif')">
<?php include_once("GoogleAnalytics.php") ?>
<!--The following section is an HTML table which reassembles the sliced image in a browser.-->
<!--Copy the table section including the opening and closing table tags, and paste the data where-->
<!--you want the reassembled image to appear in the destination document. -->
<div id="pageContainer">
...
And I am not getting the page to center. What gives? Hi I am trying to define margins of a div so that the text near it can be displayed with a space, please click here to the see the sample but it is not affecting the text and the text strikes the borders of the div. Code: <div style='float: right; border:solid 1px; padding-left: 5px; padding-top:5px; padding-bottom: 5px; marign-left: 5px;'> Can anyone guide me please how to give some space between the text and the div borders? thanks Can someone tell me why margin-top won't work on the administration bar on this page: *** removed *** ? You'll see there's a margin-top of 15px pix on the administration bar, but it butts up against the main nav bar. Thanks! (ps this is a backup, but I'll remove the link shortly anyway). hi there, i'm new to CSS and recently i'm trying to set up a blog on my site http://www.seehearconnect.com/ . the the main column and the side column looks good on firefox and safari, but in IE, the columns stick together. i've looked through the margin and css codes but i dun see where i went wrong... help! the code are as below /*------------------------------- Main Body ----------------------------------*/ #container { width: 800px; margin: 0px auto; background: #578295; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: .70em; text-align: left; /* IE hack Part 2 */; border-top: 15px solid #578295; } #topcontentdouble { float: left; width: 540px; height: 27px; background: #578295 url(images/header_whole2.gif) no-repeat right top; margin: 10px 0px 0 0px; display: inline; } #content { float: left; width: 540px; background: #ffffff; margin: 0 20px 0 0px; display: inline; } #bottomcontentdouble { display: inline; float: left; width: 540px; background: #578295 url(images/bottom_whole2.gif) no-repeat; margin: 0 10px 15px 0px; height: 27px; } /* ------------------------------ Sidebars -----------------------------------*/ #sidebar { position: relative; float: right; width: 235px; margin: 0 0px 0 0; text-align: left; /* IE hack Part 2 */ display: inline; font: 1.0em Verdana, Arial, Helvetica, sans-serif; } #sidebar ul { position: relative; border: thin none; } #sidebar ul li { list-style-type: none; list-style-image: none; } #sidebar ul, #sidebar ul li { margin: 0; padding: 0; } #sidebar ul li ul{ background: url(images/sidebar_bottom.gif) no-repeat bottom white; margin: 0 0 20px 0; padding: 10px 5PX 15px 5px; } #sidebar h2 { background: url(images/sidebar_top.gif) no-repeat; width: 235px; margin: 10px 5px 0 0px; padding: 8px 0 1px 20px; color: #476C7E; } /* The following is the fix for 3-pixel-jog bug in IE */ /* Hide from IE5-mac. Only IE-win sees this. \*/ * html #content { /*margin-right: 7px;*/ } * html #sidebar { height: 1%; } /* End hide from IE5/mac */ #sidebar ul li ul li{ margin: 4px 0px 4px 10px; display: block; background: url(images/bullet.gif) no-repeat; padding: 0 0 0 18px; } #sidebar ul li ul li a{ display: block; height:1%; /* IE WIN */ } #sidebar ul li ul li a:hover{ background: #FF9900; text-decoration: none; } #sidebar ul li ul li ul { margin: 0; padding: 0; } #sidebarbottom { background: white; width: 235px; height: 10px; vertical-align: bottom; } I've checked my site(www.lehsfair.org) in IE8 and FF and it works fine but in IE7/6 the red badge has a background and the bottom picture does not move down. What it supposed to do it does in IE8 and Firefox. In the left column, there should be a cow image and a pumpkin image with about 300px in between and a red star badge with a z-index that lets lay over the two images. Can anyone help me out with the IE7/6 issues?? Here's the code: Code:
body {margin: auto; background: url(../images/bg.png) left top repeat-x; background-color:#808080;}
#container{width: 1000px; margin: auto; border: 2px solid #000000; background-color:#FFFFFF; position:relative;}
#header{width: 1000px; height: 200px; background: url(../images/header.png) left top no-repeat; float: left;}
#content {width: 1000px; background-color: #ffffff; overflow:hidden; margin-bottom: 35px;}
#col1 {width: 480px; float: left; overflow: hidden;}
.ticket-box {width: 460px; background-color: #808080; margin-left: 20px; margin-top: 20px; margin-bottom: 10px; padding-bottom: 2px;}
.ticket-box h1{text-transform: uppercase; color:#FFFFFF; font-family: Arial, Helvetica, sans-serif; font-size: 22px; text-align:center; padding-top: 10px; }
h2 {color: #7f0000; text-align:center; padding: 5px; font-family: Arial, Helvetica, sans-serif; font-size: 18px;}
.box-content{background-color:#FFFFFF; margin: 10px auto; width: 450px; border: solid 1px #000000;}
.box-content p {color: #000000; font-size: 18px; font-family:Arial, Helvetica, sans-serif; padding: 10px 5px; line-height: 22px; }
.location {margin: 5px 20px; font-weight: bold; font-family: Arial, Helvetica, sans-serif; color: #000000; line-height: 22px;}
.bullets {background: url(../images/text-bullets.png) no-repeat; width: 335px; height: 175px; margin: auto; margin-top: 40px; }
#col2 {width: 480px; float: right; overflow: hidden; position:relative;}
#cow-image {background: url(../images/cow.png) no-repeat; width:457px; height: 326px; margin-top: 20px;}
#star-image {background: url(../images/star.png) no-repeat; width:376px; height: 369px; position: absolute; left: 50px; top: 300px; z-index: 1;}
#pumpkin-image {background: url(../images/pumpkins.png) no-repeat; width:457px; height: 345px; margin-top: 300px; position:relative;}
I was looking for ways to make the layout work with header, body and footer that work in IE, Gecko, Safari, etc.. I thought I found a good solution via Google surfing and it looked great. Then I discovered that it doesn't have the "<!DOCTYPE ...>" tag, so I added it and now it is thrown out of wack in most browsers. Does anyone know of a valid css layout that would include the header, the body and the footer that work. Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<style type="text/css">
/* colored borders put on for visual effect only */
body{
height: 100%;
margin: 0;
padding: 0;
}
#spacer{
height: 95%;
float: left;
width: 1px;
font-size: 1px; /* to make sure width is not overridden */
padding: 0;
margin: 0;
background-color: red; /* visual effect only */
}
#contentwrap{
width: 100%;
text-align: center;
padding: 0;
margin: 0;
}
#content{
padding: 30px;
border-width: 1px;
border-style: solid;
border-color: blue;
}
#footer{
clear: both;
height: 5%;
border-width: 1px 0 0 0;
border-style: solid;
border-color: red;
vertical-align: middle;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div id="spacer"></div>
<div id="contentwrap">
<div id="content">
<p>this is the content div</p>
<p> </p>
<p>more content</p>
<p> </p>
<p>and even more</p>
<p> </p>
<p> </p>
</div><!-- content -->
</div><!-- contentwrap -->
<div id="footer">footer</div>
</body>
</html>
I thought I can do this but it doesn't really work as the footer doesn't go all the way down to the bottom when needed... Code: <div id="header"> .... </div> <div id="main"> .... </div> <div id="footer"> .... </div> Thanks, FletchSOD Hi, I have the following code, but the div is not appearing in the center despite me using margin 0 auto. Can anyone suggest a way to centralise the div? PHP Code: left: 0px; bottom: 0px; position:fixed; width: 98%; margin: 0 auto; background: url(../images/drop_bg.png); -moz-border-radius: 10px 10px 0px 0px; -webkit-border-radius: 0px 0px 10px; -khtml-border-radius: 0px 0px 10px; border-radius: 0px 0px 10px; z-index: 1000; Thanks Hi, I have the following code that all it does is list boxes under each other. Now between each box I set a margin of 10px. However in Firefox the margin (correctly) is 10px, while in IE6 the margin becomes 20px!! Code:
<html>
<head>
<style>
div.box{
float: left;
margin-left: 10px;
margin-bottom:10px;
clear:left;
border: 1px solid black;
width:100px;
}
div.row {
float: left;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="row">
<div class="box">
Hello One
</div>
<div class="box">
Hello Three
</div>
</div>
<div class="row">
<div class="box">
Hello Two
</div>
</div>
</body>
</html>
Can anyone tell me why this is happing? will I have to resolve to hack to solve this, or I am writing my html incorrectly? regards, sim085 On this page - http://www.mts-diesel.com/index.php, it shows as wanted in FF, but in IE9, the main body is left aligned. I tried declaring margin:0 auto but it will take effect. Any help would be appreciated. Tom Hello, I am having trouble with some margins in IE 6 windows. http://designerz-core.com/e/i/ The margin between the left images by the menu, has a 4 pixel or so space in between, which I don't won't. I have applied serveral hacks none of them seem to work for the left margin. By the way I am on a 1024x768 res. Also in ie 6 the buttons don't seem to notice margin statment in css. It's suppose to be 7px for margin-top. Can someone that is good at css help? hello i have a div acting as a container for a layout and i'm using the following to center it on the browser window, having a background image and two borders: Code:
#master { position: relative; top: 0;
width: 46em;
margin: 0 auto;
background-image: url(../img/bg/.gif);
border-right: 1px solid #FA933C;
border-left: 1px solid #FA933C;
}
this works great on internet explorer, however, on other browsers it doesn't do so well; on netscape it centers the layer but it doesn't display the background/borders. on firefox it does the same thing. on opera it centers and displays the background, but it leaves a gap between the top margin and the top of the layer, even though the document margins are set to zero. is there a way to fix this? i suppose i could use position: absolute and then figure out a percentage away from the left margin... but this way is a lot better since the browser figures everything out neatly. hope someone can help out. thx in advance! I'm trying to get this div to center on teh page all teh way back to IE5. I'm using the box model, but I still can't get this thing to work. Any ideas on how to get it working? http://www.ira-soup.com http://www.browsercam.com/public.aspx?proj_id=296123 I have made this input field so people can place their name in there but noticed that when you type into it, the writing begins too close to the left side and I would like to place like a left margin on it by about 5px. This is my input field code on my form: Code: <input type="text" class="field" name="title" size="45" maxlength="200"/> On my stylesheets I placed this: Code: input.field {background-color:#333333; border:none; margin-left:5px; font-family: Arial, Helvetica, sans-serif; font-weight: none; font-size: 11px; color: #000000;}
Doesn't work?? I can't figure out why. 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? 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;
}
|
|||||||