|
CSS - Td Css Problem.. Confused :(
Hey,
Ok I have a external CSS file and in their I have Code: TD { background-color:#FFFFFF; font-family:Verdana,Arial,Helvetica; font-size:11px; color:#000000; font-weight:normal; }
The project has been handed to me to finish off / make changes to and the origonal person just gave all TDs a white bg which is fine but now the site is being changed to have a bit of graphics on the header and footer. With all TD's having the above code it blocks the background image from showing. Is their away I can keep it set for al TDs to have the white background but sort of exclude some TD's? I have tried doing a Code:
TD.footer {font-family:Verdana,Arial,Helvetica; font-size:11px; color:#000000; font-weight:normal;}
which I thought would cancel out the background color of the TD code above but it has not worked. I dont want to rename the first code I pasted because I would have to go through and change each and every single TD to have the class.. and thats over 30 pages of changes I would have to do.. Any help is greatly appreciated.. Thank you in advance Similar TutorialsI'm confused about why IE is rendering this correctly and FF is not. the main wrapper for the content isn't stretching with the image floating on the right. I know I'm missing something but I can't see what. I just started building this so there will be some styling missing but I wanted to at least get the basic elements working first. Can someone please help me see what I'm missing here? link Thanks, Brad This is driving me insane. What is happening here? The green <div> should be the same width as the table - and that width should be 830px. It looks like IE is stretching the table wider than it should be... but if so then why? When you consider that the table is 830px wide, the pink div is 730px, the green div is 850px, the red div is 620px and the blue div is 100px, you can see that absolutely nothing is lining up correctly. It all seems quite random. PHP Code: // containg div <div style="width:834px; padding:0; margin:0 auto; clear:both; text-align: left; float:left;"> // table <table width="830px" cols="10" rows="$rows" cellpadding="4" cellspacing="1" style="border-top:1px solid #CCCCCC; border-bottom: 1px solid #CCCCCC;"> // pink div <div style="border: 2px solid #FF00FF; width:730px; padding: 0; margin:0;"> </div> // green div <div style="width:100%; margin:0; padding:0; border: 2px solid #00FF00;"> // red div <div style="border:2px dashed #FF0000; float:left; width:620px; margin: 0; padding: 2px 2px 2px 100px; text-align:center;"> // blue div <div style="border:2px dashed #0000FF; float:right; width:100px; text-align:right; margin: 0; padding: 2px;"> Internet Explorer: Firefox: Thanks, ok I have been reading how we shouldnt use px as they dont scale well or whatever.. but I have just tested px in my css and when I resize the size the text scales pretty much the same a with ems or %.. but what doesnt happen is if I resize the browser window itself, the text doesn't scale up or down... with any of the units? is this the standard behaviour? because what I am thinking should happen is that if I reduce the size of browser, the font size should get relatively smaller and vice versa. I am very confused how best to define my style sheet for a given goal. Here is what I need to do: I need to have various styles of tables. Some whose text is centered (like the table header), some whose text is left justified. I need to be able to define link colors for each different type of table (i.e. a.link, a.active, etc). I just don't know how to proceed. It seems that I would do something like Code:
TD.centered {
text-align: center;
}
TD.left{
text-align: left;
}
But then I don't know how to define the link colors. Would I have to do something like Code:
.centered a:link {
color: #000000;
}
Isn't there a way I can create one selector that contains everything without having to have all these separate entries? Any help is vastly appreciated! Also, I am confused by the use of SPAN. Is this still used? Or is it best to specify the class in the element tag? thanks, brian Hi, i am in the middle of designing a website and i need to create an area to insert a YouTube video... All the videos on YouTube seem to be 640px X 385px HOWEVER the give you an embed option of 640px X 480px This is a bit confusing... what size space should i allow for, thanks in advance for your help... I had always thought that 3-digit hex codes were equivalent to the 6-digit code that you'd get from doubling each digit. So #FFF would be equal to #FFFFFF, etc. However, in Photoshop, that doesn't seem to be the case. For example, #555 gives a dark blue, but #555555 gives a dark gray. Is there a difference in what this means in different contexts? It seems there is a difference between CSS and graphics software? Hi, I've been stuck for days now just trying to setup how I want to layout my page. What I am trying to get is the BODY of the page to pretty much just contain everything. The I want to put a frame around all the content so that a small rectangle gradient image that I made will expand as needed to fill the browser window. Then finally I want a DIV wrapper that will hold all the page content. Here is my latest attempt to do this; Code: html, body {
margin: 0;
color: black;
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
padding: 0;
text-align: center;
}
div#frameBG {
top:0;
left:0;
z-index: 1;
}
div#wrapper {
margin: 0 auto;
width: 900px;
text-align: left;
z-index: 2;
}
div#logo {
position: relative;
top: -760px;
border: 0;
padding: 0;
}
div#leftCol {
width: 150px;
position: relative;
top: -580px;
left: 0px;
border: 2px;
padding: 10px;
background-color: #CCCC00;
text-align: center;
}
Code: <HTML>
<HEAD>
<link rel="stylesheet" type="text/css" href="style-test.css">
</HEAD>
<BODY>
<DIV id="frameBG"><img src="images/dk-green-rect.jpg" width="100%" height="100%"></DIV>
<DIV id="wrapper">
<DIV id="logo"><img src="images/header_01.jpg"></DIV>
<DIV id="leftCol">
<DIV> ...bunch of stuff here </DIV>
<DIV> ...bunch of stuff here </DIV>
<DIV> ...bunch of stuff here </DIV>
</DIV>
</DIV>
</BODY>
</HTML>
Using that I can at least get the content in the wrapper to appear over the background, but.... I get extra white space below and to the left of the background as I add more content. ...and, having to use -580px to position my stuff where I want it doesn't make sense for this. Someone suggested just putting the background in the BODY and leave out the BGframe but then the graphic repeats instead of stretching. Any help here???? Hello...I have a simple layout that I cannot get right. I have a (in looks) two column layout. In the content area, the first div defines the header image for the left content column. The second div defines the right help column. The third div defines the left content column. What I would like is, for the left content column to move up under the header image for that column. I'm pretty sure it's a float issue. Here is a link to the page: http://www.rustbug.com/mmtest/two_thirds_template.html Hey, I think i just need someone else to look at this for me. I've been coding all day and would probably be able to figure this out if I just went to bed and did it tomorrow. If you roll over an image that's alson an anchor at www.deeperdevotion.com/wp, you'll find that it places a background-color or underline or both on it. The thing is, I can't find the code in my CSS that's causing me the trouble. my css is located at www.deeperdevotion.com/wp/wp-content/themes/dd/styles/101106.css Thanks. Hello everyone, I am hoping I could get some help on this. I'm the new Marketing guy at this company. One of my duties is to fix an issue with our website which was built by the last guy to sit in this chair. I may not know how to build a proper webpage, but this guy knew exactly how not to do it and ran with just that. So, the issue lies within this example page: tinyurl.com/rediculouswebsite The footer ends up under-lapping the table when viewed in IE (when not in compatibility mode) and Firefox. I know this is a ridiculously constructed site, I just need to fix this one problem and be done with web development forever. High fives and scotch from my boss very well may ensue. Thank you all very much. Hello. I am new at css and web design so if these are easy problems please excuse. First of all, the website url http://www.onlinecasinoboss.com In Firefox, the unordered lists <ul> in the left column do not display correctly. The left margin is way too big. I'm not sure why, please look at the page in IE to see what I want it to look like. And in Internet Explorer, the spacing between my top image, header bar, and main page is screwy. There should be no space between the header image and header bar (the flags are in this area). Also there should only be 2px spacing between the header and the main page, however it appears there is atleast 24px there. Again please refer to the page in FF to see what I want it to look like. I like css, and have decided to pursue my first design in css based off of the many professional designers reconmendations and reviews. But I must say it is a major headache to deal with cross-browser/platform display problems. And what professional designer wants to rely on 'css-hacks' when producing a product for a major vender. Just beginner bitching. Thanks for the help! Hey guys. I made a little news script for my site, but if I submit more than 1 news "article" IE doesn't style it. It will style the first article though. In FF everything is fine... If you view it in firefox you will see what im talking about. To see it visit http://www.leetwebmasters.com/beta_site/test2/ Where it says "THIS TEXT SHOULD BE GRAY", that part is the title and everything on that line should be gary, then below it is the news, "meh". Here is my code: Code: <!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="styles/style.css" />
</head>
<body>
<div id="container">
<div id="topbanner"><img src="images/topbanner.gif" /></div>
<div id="mainbanner"><img src="images/mainbanner.gif" /></div>
<div id="navbox">
<div id="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
</ul>
</div>
<!-- END NAVBOX -->
</div>
<div id="viewnews">
<?php
include('');
$query = "SELECT * FROM articles LIMIT 4";
$rs = mysql_query($query) or die (mysql_error());
while($row = mysql_fetch_object($rs)) {
print "<div class=\"title\">";
print "Title: ".$row->title ." | Submitted on: ". $row->date . " | Submitted by user: ". $row->submitted_by;
print "</div>";
print "<div class=\"news\">";
print "News submitted:<br /> ".$row->news;
print "</div";
}
?>
</div>
<!-- END CONTAINER -->
</div>
</body>
</html>
CSS: Code:
#container
{
width:950px;
margin:auto auto;
}
#mainbanner
{
clear: both;
}
#viewnews
{
float: right;
width:750px;
height:450px;
}
.title {
float: right;
background-color:#D6D6D6;
width:750px;
height:35px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
.news
{
background-color:#F5F5F5;
}
#navigation
{
float: left;
width: 200px;
}
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
}
#navigation li {
border-bottom: 1px solid #828282;
}
#navigation li a:link, #navigation li a:visited {
font-size: 90%;
display: block;
padding: 0.4em 0 0.4em 0.5em;
border-left: 12px solid #828282;
border-right: 1px solid #828282;
background-color:#939393;
color:#EDEDED;
text-decoration: none;
}
#navigation li a:hover {
background-color:#AAAAAA;
}
Can someone please help me? I can't figure out what is wrong hello ! can someone tell me what i have wrong in CSS i can see it in FF okay, but IE makes me worry : http://www.autobazar.eu/sk/wallpapers2.php thanx for your reply So I have tested in all versions of IE and IE 7 seems to be the only one that gives me a problem. I have tried so many hacks. And now I am at a loss of ideas,time and mind. the site is woodbuiltright com / index-alpha1 php It seems the "E-Page" Div does not expand to contain everything. I have tried clearing divs but I must be missing something. Thanks I have created a nav bar with css using the widely distributed '<ul>' coding. The problem I am having I think is with the anchor tags. The look of the nav bar is fine but depending on the float position the anchor tag immediately next to it won't follow the css. Here is the css.. body { margin:0; padding:0; } div.container { text-align:center; } div.center { margin-top:20px; margin-left:auto; margin-right:auto; width:800; text-align:left; } div.left { float:left; width:100; height:500; background-color:#007700; } div.right { float:right; width:130; height:500; background-color:#e8e8e8; font-size:10pt; } div.header { clear:both; width:40%; } div.footer { clear:both; margin:0; width:100%; } ul { float:left; width:100%; padding:0; margin:0; list-style-type:none; } a.topmenu { float:right; width:5em; height:2em; text-decoration:none; color:#005500; background-color:#e8e8e8; padding:0.2em 0.6em; border-right:1px solid #005500; } a.topmenu:hover { background-color:#005500; color:#e8e8e8; } a.topmenu:visited { float:right; width:5em; text-decoration:none; color:#005500; background-color:#e8e8e8; padding:0.2em 0.6em; border-right:1px solid #005500; } li { display:inline; } a.leftmenu { color:#ffffff; text-decoration:none; } a.leftmenu:hover { color:black; } a.leftmenu:visited { color:#ffffff; text-decoration:none; } and here is the html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <link rel="stylesheet" type="text/css" href="newstyle.css"/> </head> <body> <div class='container'> <div class='center'> <img src="fdat_logo_short.jpg" width=250 /> <ul> <li><a class='topmenu' href="contact.php">Contact Us</a></li> <li><a class='topmenu' href="about.php">About Us</a></li> <li><a class='topmenu' href="services.php">Services</a></li> <li><a class='topmenu' href="news.php">News</a></li> <li><a class='topmenu' href="home.php">Home</a></li> </ul> </div> </div> </body> </html> Hello all, Apologies to be asking for help on my first post, but I've scoured the internet looking for what is probably a quick fix but without the terminology I'm losing hours - time to ask for help! my site is englas.pl and in forefox it's fine. In ie8 it seems to be fine as well, the problem is with ie 6&7. The CSS validates according to the w3c site. (Sorry, can't add urls as i'm a new user) ie6&7 'cuts' off the bottom section of text where the container meets menu-bottom-bkg. At least this is what is visibly the case when you look at the webpage. The custom div look like this: #container { background: #FFF url(../images/bkg_container.png) repeat-y; min-height: 100%; width: 1190px; margin: 0 auto; padding: 0 14px 0 14px; } #header { background: url(../images/bkg_header.png); height: 127px; width: 1160px; margin: 0; padding: 15px 0 0 30px; } #menu-top-bkg { background: url(../images/bkg_menu_top.png) no-repeat left top; height: 128px; width: 1190px; margin: 0 0 -128px 0; } #wrapper { overflow: auto; background: url(../images/bkg_menu.png) repeat-y left; min-height: 500px; width: 1190px; margin: 0; padding: 0; } #menu { float: left; background: none; min-height: 370px; width: 159px; margin: 0; padding: 110px 0 0 0; } #content { float: right; background: url(../images/bkg_content.png) no-repeat right top; min-height: 400px; width: 763px; margin: 0 0 0 25px; padding: 15px 243px 10px 0; } #menu-bottom-bkg { background: url(../images/bkg_menu_bottom.png) no-repeat; height: 141px; width: 1190px; margin: -111px 0 0 0; } #footer { background: url(../images/bkg_footer.png); height: 100px; width: 1190px; margin: 0; padding: 16px 0 0 0; } I've gone through the html and i can't find any evidence of it being this, so i'm hoping that the css work above doesn't comply with something in the ie6&7 coding spec. I've read the guidelines to posting, so I've edited the post as much as possible to be helper friendly! Many thanks to all, doodlebug Hello all. I've just started learning to code because I recently started a business and needed a website. I'm having a few issues. I'm using the 960 Grid System plus a scroller found at queness.com I can't post links here apparently, or I'd show you what I'm using. The page renders fine in Firefox (Mac & PC) Safari (Mac & PC) IE 8 and Chrome. IE 6 is screwed beyond understanding. IE 7 Pushes me off the screen and links don't work. And Opera squeezes my text together. I have screen shots if necessary. Here is a link to the site in question: ohmyyoga.com I inserted a redirect script for IE 6-7. So you'll be redirected to my old site if you try the regular URL from either of those browsers. For the purposes of this, I've copied the site W/O the redirect. The link is test2.ohmyyoga.com The site validates CSS and XHTML. I'm sure it's something super simple. I'm just brand new to all of this. Any help would be appreciated. Cheers Hi all...I am simply trying to create a header (colored bar). Every thing is fine, even in IE 8 but when it comes to IE 6, the bar does not appears. The code is simple CSS code is Code: #css
{
position:absolute;
top:0px;
height:30px;
right:0%;
left:0%;
background-color:#805670;
border-style:solid;
border-width:thin;
border-color:#805670;
padding-top:12px;
}
and I have just added this line in my .php page Code: <div id="mybio"></div> What can be the problem?? Need to know how the pull down menu and a browse button could take a style like http://www.discovertravel.no/ i tried to make it but it did not work on firefox... so can anyone help me to make this style coz it appears well in firefox. I have a big problem with css in both IE and FF I don't know what's going on i'm making a navigation menu with submenu from some elements when i display the submenu from the element the square bullets isn't displayed beside the list item from the submenu and it's required in firefox and even the hover effect isn't displayed correct in FF also and it's displayed in IE correctly and in some page the conetnt was wholy distroyed in IE and display correct in FF with it's bugs and in dream weaver the design is going ok and i'm using a strict DTD i don't know what's wrong and what's going on ??? |
|||||||