|
CSS - Body Css Not Working
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?! Similar TutorialsO.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] 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? 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 '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. Dear all, I am willing to develop a div tag, which will cover the entire body tag. The code I am using is the following: Code: <div id="warningLayer" style="position:absolute; width:100%; height:100%; margin:0; padding:0; background-color:#000000; opacity: 0.5; z-index:999999999; display:block; overflow:visible;"> </div> Unfortunately, the HTML page covers more that the browser window, hence when the visitor scrolls down the page, the body remains uncovered. How could I fix this issue? Thank you in advance. I am trying to center the whole page. the body contains all divs, contained in one main div. I tried I trick I have been using for a while but it messed with one the other divs. I was using Margin-Left:-375px; Position:Absolute; Left:50%; any ideas for another way to center my page? At the moment, my BODY tag contains the following CSS: Code:
BODY {
background: url(images/gradients/bg_top.jpg);
background-repeat: repeat-x;
}
The bg_top.jpg file is an image 200px high, and 3px wide. This displays nicely at the top of my page. It is a gradient from dark grey which fades out to a pattern of simple squares. I would then like these squares to be repeated across the whole of my background. What I wanted to do was to set a second background image that would display underneath the gradient, but this didn't appear to work. Looking around Google, it appears that you can only set the one background for the body tag. Is this the case? If so, is it possible to set it up so that the square pattern repeats itself across the whole page, but underneath the gradient at the top? Many thanks. I am currently setting the body id of my pages to highlight what item I am on... Such as: body#news #news_tab a, { border-bottom: 1px solid #fff; background: #fff; color: #000; } But I was wondering if it was also possible to somehow make a div appear (changing display from hidden to block) by putting an id in the body tag....But since the div isn't a link, for some reason I can't make it work. I tried: Adding this div: <div id="news" style="display:none">Testing Me</div> Adding this body tag: <body id="news"> And then adding this style definition: body#news #news { display: block; } but it still doesn't display. Is this just not possible? Is there anyway around it? Thanks! Hi all, I would like to be able to have the body background change when moving from page to page. Is it possible, without javascript. Code: body {
margin: 0px;
padding: 5px 0px 5px 0px;
background: url(blue2.jpg) fixed;
} {
Specifically the surrounding blue2.jpg that frames the page. page link css link Thanks. Hi guys I've seen a few websites that use a fixed width column in the middle of the screen that appear to cast a shadow over the background. I want to achieve that but I can't figure out how. The central div is 800px wide so I tried creating a very wide but short background image with this image on but I can't position it bang in the middle where I need it (the image is 2400x8px and 1.46KB) Can anyone help? Either with the positioning of this image or with a better solution? Cheers guys I'm a novice with CSS and HTML so the following may seem elementary to most of you. I'm a retail vitamin store owner with a website, (URL address blocked: See forum rules) . We do very well with our store front and are getting better and better with our online discount vitamin store. Our web master has programmed our site so we can easily insert new products. This is done in the <body>. Recently I've wanted to add some spice with color and formatting . At first I was doing this with something like <FONT FACE="Verdana, Helvetica, Arial" size="4" color="006600">. But now as I get into CSS and double checking all code with W3.org, it doesn't like this approach. Now I'm trying <span id="enzymatic" class="prod_description"> in the <body> with span#enzymatic p { color: green; } span#enzymatic h4{ color: blue; } etc. in a CSS definition file. It all works well, but W3.org still doesn't like where I've inserted the code. If you go to our page: (URL address blocked: See forum rules)=country-life-seniority-multivitamin You will get among other "errors" the following message: <h4>Seniority ™ Multi-Vitamin Capsules </h4> The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element. One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>"). Any hints as to what basic rules I'm breaking? Be kind. Many thanks, healthyphil Hi, Does anyone knows how i can have css style in the body. The whole coding part should be in the body. I need show link which have the same propertise in a PHP code and I am just editing it. I am trying to work it around this way. I juts want to have link to another page with different font and font folor change when hover. Can someone show me how i can do this. I am new to css. Please help me. hello friends, please tell me how can i specify a hyperlink, active, hover and visited attribute in body { } for example i have the following css BODY { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; background-color: #F2F2F2; font-family: Arial; font-size: 11px; color: #000000; text-align: left; } now i want to specify the default hyperlink with active, hover and visited attribute within body. Thx. Please look at http://www.mts-diesel.com / index.php I have a 25px div (#topmargin) that I want flush against top of screen. I assigned padding & margin to both div & body elements but for some reason the I can see about 3px of the body bg above the div #topmargin. Any help would be appreciated. Thanks. Tom Hey New to the site, I thought it would be a good place to ask a question or two... I am trying to have a repeating background as well as an overlapping body image at the top. I keep failing, I can only get one or the other working. Here is the only part I know works 100% Code: <style type="text/css"> body { margin:0px; 0px; 0px; 0px; background: url(images/topbg1.png) no-repeat 50% 0%; min-height:106px; position:relative; } </style>
Any help you can give I would greatly appreciate, thanks... I have some tables that contain a lot of columns, so the table goes beyond the users viewport. I would like the body of the page to expand to the table, anyone know of a way to get the body to expand horizontally. Below is some code, I would like the red outline to expand to the black. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Insert title here</title> </head> <body style="border:1px solid red;"> <table style="border:1px solid green;width:2500px;"> <tr> <td style="">slkfdj</td> </tr> </table> </body> </html> I have a body, a container div, and inside the container div, a head, navigation, content, and footer div. I have the background of the body filled in with a repeating background image .. and I have the footer div with clear: both, so it will show up below the content div, rather than just underneath it. The problem is the body background does not extend past the lower portion of the footer. How can I fix this? Link to Website |
|||||||