|
CSS - Ie6 - Difficulty With Inheriting From Body Tag
I have the strangest thing going on when I view my site in IE 6.
I'm using Drupal and the body tags have classes assigned to it depending on what page you are viewing. Therefore, I can have different content IDs by descending from the body tag. So, I have the following declared in my stylesheet: Code:
body.two-sidebars div#content {
margin: 0em 160px 20px 160px;
padding: 0 10px;
line-height: 1.6em;
text-align: left;
}
body.sidebar-left div#content {
margin: 0em 10px 20px 160px;
padding: 0 10px;
line-height: 1.6em;
text-align: left;
}
In FF and even IE7 my content divs view as they should depending on the class in the body. However, in IE6, my margin declaration is ignored when the page is loaded, but on a refresh, the page usually will display correctly. Are my styles technically declared correctly or is there anything I can do to make the "more correct" and therefore make IE6 happy? Here's my website. For those of you that have IE6 (or even IE7 to double check me), let me know if the margins in the content areas are working or if the text runs over the side bars. http://whirligig.dreamhosters.com/ Similar TutorialsHey peeps, my problem is. I have a main table that is 700 px wide and consists of 3 cols and 1 row. Now in the first and last cell i have another table that consists of 1 col and 3 cells. In the Top and bottom cell of both tables i have an image that is 5px wdie * 20px high. In the middle cell i have a 5px wide*1px high background image which tiles in that cell. Now the problem is that the main table will never have a fixed height so i dont know what height to set the cells in the middle. Its sort of a shadow effect i made for my site. I was kind of hoping the there was some way of making the tables height match the height of the cell thats its in. Anyone got any ideas. I figured there would be some css trick i could use? Hope it makes sense. Currently, my site is setup like this: Code:
#wrapper {
margin: 0 auto 15px auto;
width: 900px;
border: solid 1px #999;
border-width: 0 1px 1px 1px;
overflow: hidden;
background: #fff
#left {
float: left;
width: 200px;
margin: 0;
font-size: 75%;
}
#right {
float: left;
width: 698px;
margin: 0;
font-size: 80%;
}
Now I know that I didn't define a background for the #left or #right div, but that is because that is a direct copy and paste of how I currently have it setup since even if I do insert a background color they don't apply. The wrapper's white background seems to overwrite a defined background for the #left and #right. The issue is that the #left is my navigation to which I've colored dark gray (#999). I don't mind if the #right stays white because that is where I place the content of the site. The issue here is when the navigation ends in #left it shows the white beneath the links, which is ugly. I'd like for the dark gray to extend the length of the page filling in the width of the column. I thought I found a "workaround" but not really. I set the wrapper background to #999 which works great when the content on the #right is longer than the navigation inside the #left, but when the #right is shorter the column ends significantly shorter in length and then shows the #999 color beneath where the content ends. I've even tried defining no background in the wrapper (which wouldn't be good anyhow because my body background is a gradient) and even then the #left and #right divs wouldn't take a background color. Help please! Thanks in advance, Michael Hey, I have parent table, with several nested tables within. I'm changing the CSS values on-the-fly using Javascript so I'm using id's instead of classes. The CSS of all the tables is generated using this code: Code:
/* mp_tip_CSS_x_TABLE CSS */
<?
for ($i=1; $i<=12; $i++) {
?>
#mp_tip_CSS_<? echo($i); ?>_table {
border-color: <? echo($mp_tip_CSS_table_border_color[$i]); ?>;
border-style: <? echo($mp_tip_CSS_table_border_style[$i]); ?>;
border-width: <? echo($mp_tip_CSS_table_border_width[$i]."px"); ?>;
border-collapse: collapse;
}
#mp_tip_CSS_<? echo($i); ?>_table td {
border-color: <? echo($mp_tip_CSS_table_border_color[$i]); ?>;
border-style: <? echo($mp_tip_CSS_table_border_style[$i]); ?>;
border-width: <? echo($mp_tip_CSS_table_border_width[$i]."px"); ?>;
border-collapse: collapse;
}
<? } ?>
/* mp_tip_CSS_x_TABLE CSS END */
The parent table is mp_tip_CSS_1_table and the nested tables are mp_tip_CSS_2_table to mp_tip_CSS_12_table. The problem I'm getting is the nested tables seem to inherit the td border values of the parent table, so they have two borders instead of just the single one (the parent border and their own border). Is there any way to make the parent border td value only be applied to the immediate td's of the parent table, and not the td's of the nested tables as well? After browsing some web pages I came across using: Code:
#classname >tr >td {}
But that doesn't seem to work... Thanks for any help, -Ross Hi all, I am recreating some nav links. Instead of having them be text, I am converting them to images. 3 images per link: regular, hover, visited. The test page is here You will see "Home" That is an image. The other 3 haven't been messed with yet and are still text. Here's my problem. As I said, The link itself will just be an image. When hovered over, it will go to the same image, just a different colored one. After clicked, it will display a third image instead, once again a different color. BUT, elsewhere in my CSS I have a section where visited links are set to turn black, and I think THAT'S what causing the home image to disappear after visited. Could ya'll have a look at my source and CSS and tell me what you think I can do to fix this? CSS file is here Thanks! Chris I have the following defined in my css file: Code:
table {
border:1px dashed #999;
}
And the following code interspersed throughout other parts of my code: PHP Code: echo "<table nowrap border=\"0\">"; The problem I have is that the border is still appearing around these tables where I have specified no border. As I understand, the inline style should take precedence, right? Is this a php issue? Or am I doing something else wrong? I know this is probably the most asked question here, but I've been playing with it for a while and ... Anyway, this is my page This is my CSS Code: body {font-family: Arial, Helvetica, sans-serif}
td {font-family: Arial, Helvetica, sans-serif}
th {font-family: Arial, Helvetica, sans-serif}
div.container {
width:750px;
margin:auto;
}
div.logo {
float:left;
text-align:center;
width:138px;
height:138px;
}
div.header {
height:65px;
border:1px solid blue;
line-height:50%
}
div.picbar {
height:65px;
border:1px solid red;
line-height:50%;
}
/* The following code creates the navigation items */
#navbar {
clear:left;
float:left;
width:auto;
padding:0;
vertical-align:middle;
}
#navbar li{
margin:2px; /*dictates the space between navbar items */
padding-right:0.5em;
width:120px;
float:left;
text-align:center;
}
#navcol {
clear:left;
float:left;
width: 125px;
padding: 0;
margin: 10px 0 0 0;
font-family: 'Trebuchet MS', 'Lucida Grande',
Verdana, Lucida, Geneva, Helvetica,
Arial, sans-serif;
color: #99CCFF;
}
#navcol ul, #navbar ul{
list-style:none;
margin:0; /* removes indent in IE and Opera */
padding:0; /* removes indent in Mozilla and Netscape 7 */
border:none;
list-style-type:none; /*turns off display of bullet */
}
#navcol li {
border-bottom:1px solid #003366;
margin:0; /*dictates the space between navbar items */
}
#navcol li a, #navbar li a {
display: block; /* enables the entire link box to be clickable */
padding: 5px 0 5px 5px;
border-left: 10px solid #003366;
border-right: 0px solid #508fc4;
background-color: #2175bc;
color: #fff;
text-decoration: none;
width: 100%
}
#navcol li a:hover, #navbar li a:hover {
border-left: 10px solid #99CCFF;
border-right: 0px solid #5ba3e0;
background-color: #2586d7;
color: #fff;
}
div.intro{
margin-left:145px;
position:relative;
padding-top:1px;
font-family:Verdana,Lucida;
font-size:12px;
line-height:150%;
}
div.google{
float:right;
margin-top:10px;
width:305px;
height:255px;
padding:0 0 5px 10px
}
div.footer {
margin-top:50px;
width:750px;
word-spacing:100px;
text-align:center;
float:center;
height:20px;
background-color:#1c64d1
}
div.copyright {
width:750px;
text-align:center;
float:center;
height:20px;
}
a.ft:link { color: white; text-decoration: none }
a.ft:active { color: red; text-decoration: none }
a.ft:visited { color: white; text-decoration: none }
a.ft:hover { color: yellow; text-decoration: underline }
h1.logo{padding:20px;margin:10px}
h2.header{color:blue;font-size:1.2em;padding:20px;margin:10px}
h3.title{font-family:arial;color:green;font:courier}
h4.ftlinks{padding:10px;font-size:12px;color:"dark blue"}
b.subtitle{font-variant:small-caps;font-size:12px;font-weight:bold;after-content:" - "}
What I want to do is have the navbar div be positioned in the center of the red box that I have defined as the picbar div...it should be under the "Funkyfoof - Smarter Spending..." Thanks for your time Hello all, I am having difficulty with creating a menu: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
#menu {
width: 200px;
display: block;
float: left;
} /* end #menu */
#menu ul { list-style-type: none; }
#menu ul li { background-color: #0000ff; margin-bottom: 1em; }
#menu ul li a {
display: inline;
width: 100px;
text-decoration: none;
color: #000000;
font-size: 0.8em;
border-top: 2px solid #000000;
border-bottom: 2px solid #000000;
background-color: #ffffff;
} /* end #menu ul li a */
#menu ul li:before { content: url("images/menu_left2.png"); }
#menu ul li:after { content: url("images/menu_right2.png"); }
</style>
</head>
<body>
<div id="container">
<div id="menu">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="about_us.php">About Us</a></li>
<li><a href="get_an_estimate.php">Get An Estimate</a></li>
<li><a href="services.php">Services</a></li>
<li><a href="portfolio.php">Portfolio</a></li>
<li><a href="job_opportunities.php">Job Opportunities</a></li>
<li><a href="contact_us.php">Contact Us</a></li>
</ul>
</div>
</div>
</body>
</html>
For starters, I would like the link to be 100px wide no matter what. I can achieve this with display: block in the anchor tag definition, but then that pushes each image onto a new line. The way I have it now is closest, but the images do not line up with the anchor tag. The anchor tag seems to be pushed down by about 4 or 5 pixels. I've tried various combinations of margin adjustions but nothing seems to fix it. Also, I tried just adding extra pixels to the top of the image but that pushes the whole block down, not just the images. Any thoughts? To design my new site properly I am learning to use CSS for layout. To practice my CSS styling I want my first sample site to have, from top to bottom: 1) a simple centered H1 heading; 2) a CSS-styled drop-down menu bar centered under the heading; and 3) two columns of text (paragraphs). Finally, the footer includes a page hit counter followed by the two W3C gif files (XHTML 1.0 and CSS) in the lower-left and right corners. All together, these pieces should make up a very simple practice page for me (http://stallinswebdesign.com/vs/index.php). However, I cannot find an online tutorial to explain in great detail how to use the position property to put these things where I need them to be. I am getting very frustrated that I can't figure out through trial and error how the absolute and relative values work together to position my stuff the best way on the page. I don't what to write hack CSS. I don't want to "hard code" the whole page with absolute positioning, because it won't scale when font sizes change from visitor to visitor, right? I want to write lean, best-practice CSS. I've concluded that, after reading some online tutorials and perusing the CSS books I've recently bought, I don't have the first clue how absolute and relative positioning work. For example, I can't get that second column of paragraphs to line up alongside the left column unless I apply what looks to me like a CSS hack. Like many examples I've seen online, I'm using the <div> tag to wrap multiple pieces of data together so that I can apply styling (especially positioning) to them as a whole. In particular, the left column paragraphs are wrapped in <div id="contentLeft">, and the right column paragraphs are wrapped in <div id="contentRight">, and both together are surrounded by parental <div id="content"> tags. Still, it takes a lot of pain for me to style those three id's in the CSS file so that the two columns appear where I want them. And don't even ask me about what should be a simple footer placement! I can't get the hit counter paragraph and those two W3C images to get to the bottom of the page without absolute positioning. But when I do that, they don't scale up or down automatically as the amount of text in those two columns increases or decreases. Can you please glance at my .css and .htm files below and tell me where I'm going wrong? More importantly (teaching me to fish and not just feeding me fish :-) ) can you point me to an online or printed resource that goes into great detail explaining the uses of the position property? This is so not like tables :-D Thank you for your time and advice. Curtis my content CSS file (no menu stuff): Code:
body {
font: 100%/1.4 arial, helvetica, serif; background-color:#fff;
text-align:left; padding:0px; margin:0em; width:64em;}
#homeTitle {
position:absolute; font-size:2.0em;
background-color:#f5f8ec; color:green; letter-spacing:0.3em;
margin: 0em 0em .1em 1em;}
p {
background-color:#fff5e8;}
#bannerRight {
position:absolute; z-index:2; top:7em; left:29em;
background-color:#fff;}
#content {
position:absolute; width:45em; border:dotted 1px red;
margin-left:9em; margin-top:19em;}
#contentLeft {
position:relative; margin-left:0.5em; margin-right:24em;
border:dotted 1px blue;}
#contentRight {
position:relative; margin-top:-78.5em; margin-left:24em;
margin-right:0.5em; border:dotted 1px fuchsia;}
#counter {
position:relative; top:1.5em; border:dotted 1px gray;}
#W3C_boxes {
position:relative; margin-top:6.5em;}
#W3C_css {
display:inline; padding-left:48em;}
img {
border:0px;}
my sample web page: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>
Valley Spokesmen Bicycle Touring Club
</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="The Valley Spokesmen Bicycle Touring Club, for bicycle enthusiasts of all ages, is based in Dublin California and hosts dozens of club rides each month, both local and afar, ranging from 15-mile cruises to 100-mile epics!" />
<meta name="keywords" content="Valley Spokesmen, Cinderella Classic, valley spokesman, cinderella ride, cinderella century, valleyspokesmen bike club, valleyspokesmen, cinderella bike ride, cinderella classic bike ride, cinderella ride california, cinderella bicycle ride, valley spokesmen bike club, valleyspokesmen.org, cinderella bike, bike club san francisco" />
<script type="text/javascript" src="js/formEmailValid.js"></script>
<script type="text/javascript" src="js/newWindow.js"></script>
<script type="text/javascript" src="js/newWindow_2.js"></script>
<script type="text/javascript" src="js/linkExternal.js"></script>
<script type="text/javascript" src="js/navDrop.js"></script>
<link rel="shortcut icon" href="ico/favicon.ico" />
<link rel="icon" href="images/animated_favicon1.gif" type="image/gif" />
<link rel="stylesheet" type="text/css" href="css/siteWide.css" />
<link rel="stylesheet" type="text/css" href="css/menus.css" />
</head>
<body>
<h1 id="homeTitle">Valley Spokesmen Bicycle Touring Club</h1>
<div id="container">
<ul id="nav">
<li><a href="#">Home</a> <!-- first dropdown -->
<ul>
<li><a href="#">Home Page</a></li>
<li><a href="#">About Our Club</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</li>
<li><a href="#">Events</a> <!-- second dropdown -->
<ul>
<li><a href="#" class="topDrop">Cinderella Classic</a>
<ul>
<li><a href="#">Training Schedule</a></li>
</ul>
</li>
<li><a href="#" class="topDrop">TOSRD</a>
<ul>
<li><a href="#">Registration Form</a></li>
</ul>
</li>
<li><a href="#">Clinics</a></li>
</ul>
</li>
<li><a href="#">Favorites</a> <!-- third dropdown -->
<ul>
<li><a href="#">Ride Calendar</a></li>
<li><a href="gallery.php" class="topDrop">Photo Gallery</a>
<ul>
<li><a href="gallery_2008.php">2008 Photos</a></li>
<li><a href="gallery_2007.php">2007 Photos</a></li>
<li><a href="gallery_2006.php">2006 Photos</a></li>
<li><a href="gallery_2005andEarlier.php">2005 and Earlier</a></li>
</ul>
</li>
<li><a href="#">Local Bike Shops</a></li>
<li><a href="#">Favorite Links</a></li>
<li><a href="#">West Coast Rides</a></li>
<li><a href="#">BikeJournal.com</a></li>
</ul>
</li>
<li><a href="#">Downloads</a> <!-- third dropdown -->
<ul>
<li><a href="#">Membership App</a></li>
<li><a href="#">For New Members</a></li>
<li><a href="#">Club Newsletters</a></li>
<li><a href="#">Rules of the Road</a></li>
<li><a href="#">New Ride Leaders</a></li>
<li><a href="#">Club Ride Waiver</a></li>
</ul>
</li>
<li><a href="#">Grab Bag</a> <!-- third dropdown -->
<ul>
<li><a href="#">Bike Routes</a></li>
<li><a href="#">Route Ratings</a></li>
<li><a href="#">Club Clothing</a></li>
<li><a href="#">VS E-Mail List</a></li>
<li><a href="#">VS Race Team</a></li>
</ul>
</li>
</ul>
</div>
<p id="bannerRight">
<?php
$bannerPhoto_array = file('random/bannerArrayPhotos.txt'); // Get photos into an array from the text file using file()
$quote3 = $bannerPhoto_array[rand(0, count($bannerPhoto_array) - 1)]; // Randomly pick one element of the array
$quote3 = trim($quote3);
echo "$quote3";
?>
</p>
<div id="content">
<div id="contentLeft"><!-- begin left-side content -->
<p>
<script type="text/javascript">
<!-- hide from archaic browsers...
// greeting for home page
function dayPart( ) {
var oneDate = new Date( );
var theHour = oneDate.getHours( );
if (theHour < 12) {
return "morning";
} else if (theHour < 17) {
return "afternoon";
} else {
return "evening";
}
}
document.write("<p class=\"homeWelcome\">Good " + dayPart( ) + ", and welcome!</p>");
// end hide -->
</script>
</p>
<noscript>
<p>
Welcome!
</p>
</noscript>
<p class="">
From our President:
</p>
<p class="">
Happy New Year! This is the season to renew, reflect and recover. I trust that your new year brings a renewed interest in biking,
fitness and adventure. I can assure you that the new leadership team of the Valley Spokesmen Bicycle Touring Club
has all of these interests in mind as we enter our new jobs working for you.
</p>
<p class="">
But first I would like to recognize Susan Gibbs and her team for their contributions over the past year.
They made a significant contribution to the club and bicycling in our community during the past year.
I want to say thank you on behalf of the entire club for their service.
</p>
<p class="">
Our new leadership team includes Vice-President Mark Dedon; Treasurer Bill Well; Corresponding Secretary Bonnie Powers;
Recording Secretary Kim Autrey; Race Team Representative Bob Fusco; Newsletter Editor Marcia Seeger; TOSRD Chairperson
Francie Cushman; Newsletter Publisher Mary Murphy; and Ride Chairpersons Curtis Stallins and Peter Rathmann. Each of us
appreciates the confidence that you entrusted in us to serve you during 2008.
</p>
<p class="">
We plan on beginning our year by reflecting on what the state of governance of the club is to assure we have a solid
path forward. That includes updating the club’s by-laws, seeking professional help to deal with our fiduciary
responsibility of managing our club’s money, and aligning our responsibilities on the leadership team. Of course,
we need everyone to support Bob, Bonnie and Jim in organizing the events that make up the Cinderella Classic during the
weekend of April 4-6, 2008. Please save the dates. But most of all, we need you to ride with us.
</p>
<p class="">
I look forward to meeting every one on a ride during the coming year and greeting you at the Mid-winter party on
February 9, 2008. The location is the same as last year, however the hotel has a new name: Pleasanton Plaza by Marriott’s
(formerly Crowne Plaza). Make your reservation today!
</p>
<p class="">
Have a great ride today and every day.
<br />
<span class="bold">- Jim Kohnen</span>
</p>
</div> <!-- end left side content -->
<div id="contentRight"> <!-- begin right-side content -->
<p class="">
Want to earn some free V.S. gear? Look at all the cool
<a href="javascript:newWindow_2('rideLeaderAwards.htm')">
Valley Spokesmen clothing</a> you can earn just by leading some rides each year!
</p>
<p class="size12px">
<?php
echo "<span class=\"cheers\">Cheers from the Valley Spokesmen!</span><br />";
$cheers_array = file('random/cheersQuotes.txt'); // Get quotes into an array from the text file using file()
$quote2 = $cheers_array[rand(0, count($cheers_array) - 1)]; // Randomly pick one element of the array
$quote2 = trim($quote2);
echo "$quote2"; // Echo results.
?>
</p>
<p class="">
<span class="boldOrange">New Members</span> - get up to speed quickly! Download and browse through our
<a href="pdfFiles/0712_New_Member_Booklet.pdf" rel="external">New Member Handbook</a>.
</p>
<p class="">
<span class="boldOrange">
Not sure what "Car up!" means?
</span>
<br />
Read over our new
<a href="pdfFiles/0712_Bike_Rules_Of_The_Road.pdf" rel="external">Rules of the Road</a>.
</p>
<p class="">
<span class="boldOrange">How easy is it to lead a ride?</span>
Find out how much fun it can be when you look through our new
<a href="pdfFiles/0712_Becoming_A_Ride_Leader.pdf" rel="external">Ride Leader Guide</a>!
<br />View our <a href="javascript:newWindow_2('rideLeaderAwards.htm')" style="font-size:16px">Ride
Leader Awards</a> program!
</p>
<p class="">
<span class="boldOrange">
YES! - it’s Winter!
</span>
<br />
Which are you most looking forward to?
<br /> - <span class="boldBold">Scraping ice from your windshield
<br /> - Valentine’s card shopping
<br /> - Cycling through a crisp winter day</span>
<br />We knew it! You ought’a join the Valley Spokesmen and savor some beautiful winter riding,
so check our <a href="vsCalendar/month.php" rel="external">ride calendar</a> for dates that look the most
fun to you.
</p>
<p class="">
<span class="boldOrange">
Rides For The Rest Of Us</span>
<br />
If you want to start riding casually and make new friends who share your
interests, then you should join us on our <!-- <a href="rides.html#newbie">newbie rides</a> -->
shorter rides. We offer at least two rides a month for people just like you! Check the
<a href="vsCalendar/month.php" rel="external">ride calendar</a> and see how many rides suit you!
<br />
</p>
<p class="">
<span class="boldOrange">
Join the Club!
</span>
<br />
For a few dollars a year you get all this:<br />
- Monthly newsletter packed with info<br />
- A map to local pubs and coffee shops<br />
- Tons of advice on bicycle repair<br />
- Discounts in local bike shops<br />
- All the new friends you can handle!<br />
Mail <a href="pdfFiles/membershipApp.pdf" rel="external">your application form</a> today!
</p>
<p class="">
<span class="boldOrange">
Ride in style
</span>
<br />
View <a href="clothing.php">clothing information</a> online. Send an e-mail to Jim Duncan if you
are interested in club jerseys, shorts, socks, vests, jackets, etc. His address is hey-you at comcast dot net.
</p>
</div> <!-- end right-side content -->
</div><!-- end two columns of content; begin counter and footer -->
<div id="counter">
<p>
Visitors to our site since November 14, 2006: <img src='http://counter.dreamhost.com/cgi-bin/Count.cgi?df=cstallins-VScounter.dat&pad=F&ft=0&dd=odb&istrip=F' alt="Our page hit counter is over a million for the year!" />
</p>
</div> <!-- end counter; begin footer -->
<div id="W3C_boxes">
<a href="http://validator.w3.org/check?uri=referer">
<img src="http://www.w3.org/Icons/valid-xhtml10-blue" alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a>
<a href="http://jigsaw.w3.org/css-validator/">
<img id="W3C_css" style="border:0;width:88px;height:31px" src="http://www.w3.org/Icons/valid-css-blue" alt="Valid CSS!" /></a>
</div>
</body>
</html>
Quote: Dan Cederholm of SimpleBits: It's important to note that the cascading effect of CSS still applies, and alternate style sheets work just like any other style sheet, in that only common rules are overridden when the alternate styles are active. So if we had layout, positioning, and other site-wide rules in default.css that weren't repeated in the alternate style sheets, those default rules would still work. I'm making a site that has a default stylesheet with a fixed layout and an alternative one with a fluid layout. The problem I'm having is the alternative sheet not inheriting css from the default stylesheet even though the rules are not overridden. At the moment, my alternative stylesheet is an exact copy of the original (everything included) with only 3 width values changed to percentages. Theoretically, I should be able to only include these three rules alone in the alt sheet, as rules are carried over from the default sheet unless overridden. However, when I do try to reduce the alt sheet to just: Code: #container { width: auto; }
#main { width: 65%; }
#navbar { width: 30%; }
all unincluded formatting is lost. Am I doing something wrong? Cheers, Sam. 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?! 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. 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! 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? '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. 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 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. 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 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. |
|||||||