|
CSS - Displaying Database Results In A Row
Hi, I have given each column an id. I place the cloumn divs in a wrapper div named #row
Code: .row{
position:absolute;
display:inline;
width:893px;
height:20px;
margin:5px,5px,0px,5px;
}
each div has code that looks like this: Code: #RISK_SCORE{
position:relative;
display:inline;
left margin:5px;
float:left;
width:20px;
font-family:Arial, Helvetica, sans-serif;
font-size:9pt;
font-weight:normal;
}
But each column stacks up on the next, instead of lining up in a row. Can anyone tell me what I'm doing wrong? thanks -S Similar TutorialsI have the following in my html: PHP Code: <p><a href="mempage.php?do=layout"><span style="margin-right:125px;">Profile Colors</span><span style="background:#<? echo $memsettings['primarycolor']; ?>; height:10px; padding:0 5px; margin-right:2px;"></span><span style="background:#<? echo $memsettings['secondarycolor']; ?>; height:10px; padding:0 5px;"></span></a></p> In FF it shows two small squares with the colors next to "Profile Colors" but in IE it shows nothing. No squares, no colors, just the "Profile Colors" text. Any suggestions? PLEASE HELP Does CSS have any effect on the way search engines crawl your page? Like if I had some description text I wanted to have on my page, but didn't want it to be part of my design. Could I just put it in a div and move it off the screen with CSS? Would that text still be beneficial to search engines? Okay this is kind of blowing my mind. Here is my CSS: Code:
body
{
margin: 0px;
text-align: center;
}
table
{
border-collapse: collapse;
margin-left: auto;
margin-right: auto;
}
td
{
padding: 0px;
vertical-align: top;
}
td.banner
{
background-image: url("images/design/BANNER_TOP_LEFT.jpg");
background-repeat: no-repeat;
width: 597px;
height: 70px;
}
td.map
{
background-image: url("images/design/MAP_BACKGROUND.jpg");
background-repeat: no-repeat;
width: 203px;
height: 199px;
}
td.content
{
height: 100%;
background: red;
}
here is my XHTML Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script type="text/javascript" src="scripts/jquery-1.3.2.js"></script>
<script type="text/javascript">
</script>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<table width="800">
<tr>
<td class="banner">
<div id="login">
<p>
Hello
</p>
</div>
</td>
<td rowspan="2" class="map">
<p>Hello</p>
</td>
</tr>
<tr>
<td class="content">
<div id="contest">
<p>Hello</p>
</div>
</td>
</tr>
</table>
</body>
</html>
Here is what it looks like in each brower (attached). I want every browser to look like it does in Chrome.... I don't understand why the others are different? Thanks... (haven't been at developing for a while). I'm trying to learn this CSS thing (driving me crazy!!) and I'm having problems. I validated my HTML (using HTML 4.01 Transitional) and it came back 100% perfect. I validated the CSS, and I did as many of the corrections as I could figure, and I got back this when I re-validated the .css file: Quote: To work as intended, your CSS style sheet needs a correct document parse tree. This means you should use valid HTML. Warnings URI : file://localhost/U:\iQuire2\stylesheets\indexstyles1.css Line : 15 (Level : 1) You have no background-color with your color : a:link Line : 16 (Level : 1) You have no background-color with your color : a:hover Line : 18 (Level : 1) You have no background-color with your color : a:visited Line : 25 (Level : 1) You have no background-color with your color : h6 Line : 25 (Level : 1) You have no background-color with your color : h6 Line : 25 (Level : 1) You have no background-color with your color : h6 Line : 25 (Level : 1) You have no background-color with your color : h6 Line : 25 (Level : 1) You have no background-color with your color : h6 Line : 25 (Level : 1) You have no background-color with your color : h6 This is my .css file as it stands now: css Code: Original - css Code body {background:#ffffff; color:#000000; padding:0 0 0 0; margin:0 0 0 0; width:100%;} /* Page DIV Tag Stylesheet Codes */ div { position:absolute; top:1px; right:90%; bottom:auto; left:0px; } /* Hyperlink 'a href' Tags Handling */ a:link {color:#0000ff; background:transparent; font-weight:bold; text-decoration:none;} a:hover {color:#0000ff; background:transparent; font-weight:bold; text-decoration:underline;} a:active {color:#0000ff; background:#ffff00; font-weight:bold; text-decoration:none;} a:visited {color:#800000; background:transparent; font-weight:bold; text-decoration:none;} /* Text Formatting Primary Tags */ h1,h2,h3,h4,h5,h6 { font-family:Arial, Helvetica, sans-serif; font-weight:bold; color:#000080; } h1,h2,h3 {text-align:center;} h4,h5,h6 {text-align:left;} h1 {font-size:2em;} h2,h4 {font-size:1.5em;} h3,h5 {font-size:1em;} h6 {font-size:.75em;} p { font-family:TimesNR, Times, serif; font-size:.875em; text-align:left; } p.ctr { font-family:TimesNR, Times, serif; font-size:.875em; text-align:center; } p.arial { font-family:Arial, Helvetica, sans-serif; font-size:.75em; text-align:left; } p.arialc { font-family:Arial, Helvetica, sans-serif; font-size:.75em; text-align:center; } p.footertxt { font-family:Arial, Helvetica, sans-serif; font-size:.75em; text-align:center; font-weight:bold; } p.fineprint { font-family:Arial, Helvetica, sans-serif; font-size:.5em; text-align:center; font-weight:bold; } p.breadcrumbs { font-family:Arial, Helvetica, sans-serif; font-size:.5em; font-weight:bold; text-align:left; } /* SPAN Tag Text Formatting */ span.bold {font-weight:bold;} span.ital {font-style:italic;} span.und {text-decoration:underline;} span.boldital {font-weight:bold; font-style:italic;} span.boldund {font-weight:bold; text-decoration:underline;} span.bolditalund {font-weight:bold; font-style:italic; text-decoration:underline;} span.italund {font-style:italic; text-decoration:underline;} /* List Formatting */ ul {text-align:left;} li {font:normal bold normal .75em Arial, Helvetica, sans-serif;} /* Table Formatting */ table { border-width:0px; width:auto; } td { border-width:0px; width:auto; text-align:left; vertical-align:top; } table.topbanner { border-width:0px; width:100%; } td.headrlogo { border-width:0px; width:156px; text-align:center; vertical-align:middle; padding:2px; } td.headrtxt { border-width:0px; width:90%; text-align:center; vertical-align:middle; padding:2px; } td.headrbuttons { border-width:0px; width:auto; text-align:center; vertical-align:top; padding:0; background-image:url(blugradient_50x25.jpg); } table.buttontb { border-width:0px; width:auto; margin:0 0 0 0; } td.butntoplvl0 { border-width:0px; padding:1px; width:115px; font-family:Arial, Helvetica, sans-serif; font-weight:bold; font-size:9pt; text-align:center; vertical-align:middle; } td.butntoplvl1 { border-width:0px; padding:1px; width:115px; font-family:Arial, Helvetica, sans-serif; font-weight:bold; font-size:9pt; color:#ffffff; text-align:center; vertical-align:middle; background-color:#5984c8; } table.tborder { border-width:1.5px; border-style:solid; border-color:#000080; width:auto; margin-right:auto; margin-left:auto; } td.dborder { border-width:1px; border-style:solid; border-color:#000080; text-align:left; vertical-align:top; } td.dborderctr { border-width:1px; border-style:solid; border-color:#000080; text-align:center; vertical-align:middle; } table.footer { border-width:2px; border-style:solid; border-color:#000080; width:100%; } td.footertd { border-width:0px; width:auto; text-align:center; vertical-align:middle; padding:8px; }
With how it's written currently, it looks great in Microsoft Internet Explorer 6x. But when I try to bring up the same page that looks so well in IE in Netscape or Mozilla Firefox, everything becomes "squished" to the left-side of the browser window. So, for someone who's more comfortable with .css than I am (I'm working from books), can you tell me where I went wrong in this thing? I can understand if the hyperlink formatting might not be "up to code" so to speak (warning from W3C CSS Validator above), but would it affect the formatting of the entire document?? I want to avoid forcing the layout into a specific width, so I tried using percentages and "auto" for styles so that it will be a fluid layout. As I said, IE shows it just the way I want it to look. Firefox & Netscape squash everything down as if there were no formatting whatsoever. Do I need to have separate .css code for each browser?? I don't have a Mac, but my boss does and I'm sure he'll want the site to look good working through Safari too (can't test it) HELP!!! I keep reading how GREAT CSS is but I think it SUCKS!!! I have been going bonkers trying to figure out how to do what I want in CSS rather than do it the easy way with tables. If I can't get some help that actually let my page do what I want I think I will be forced to go back to tabular format. My page is here. My CSS is here. I've got the banner and the menu working fine. The look great. But now I'm working on the main content of the page. I want to have three different sections. The three divs are news, calendar, and main I want news and calendar to be on top with the main underneath both. What I wont always know is how much content is in either the news or the calendar. Sometimes the news section will be longer sometimes the calendar section will be longer. But in either case I want the Main section be be BELOW BOTH sections on the page. At first I could get it to work when the news div had more content. But not if it had only a small amount of content. So I posted on this site here. . Well it worked well enough after that. Not perfect but at this point I'll just be happy if things aren't overlapping eachother. So now I went back and added more content to the news section and it doesn't work. Now the Main section rides up and under the calendar section. WHY WHY WHY???? Someone PLEASE prove to me that CSS is worth all of this agrivation. I don't care how "good" CSS is supposed to be if I can do it with tables and NOT with CSS then what is the point??? Hey all.. I'm still new to CSS in general, but know how it works. Anyway, I'm trying to get an element in a DIV to display properly, but for some reason, it isn't Code:
.contenthead {
background-image: url(player/images/player_03.gif);
background-repeat: repeat;
height: 50px;
color: #000000;
font-weight: bold;
font-size: 40px;
}
The result is at http://www.fairfieldmediacoop.com/fpactest/play.php?recordID=hO2GmjtlvSJKBgcqp4LZ The only thing I can think of is that the text I am trying to enlarge, which is the "Chamber Talk" in black above the video (center of the strip under the header) is encased in a Table. Would that cause it not to listen? I am using float to create a two column layout. When I included a <p> tagged with some emphasized <em> text in the center column, it causes some of the content on the left column to disappear. If the emphasized text isn't in its own <p>, the problem doesn't happen. Furthermore, it only happens with IE7 and not FF. Does anyone know why this strange behavior? Thank you http://tapmeister.com/layout_test/e...s_question.html Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Funny Behaviour</title>
<style type="text/css">
* {margin: 0; padding: 0;}
body {background-color: white}
#wrapper
{
width: 100%;
background-color:lime;
margin: auto;
}
#content {background-color: blue;}
#main
{
margin-left:180px;
background-color: yellow;
}
#side1
{
width:180px;
float:left;
background-color:purple;
}
</style>
</head>
<body id="page_bg">
<div id="wrapper">
<div id="content">
<div id="side1">
<p>Left column. Left column. Left column. Left column. Left column. Left column. Left column. Left column. Left column. Left column. Left column. Left column.</p>
</div>
<div id="main">
<p>First do not have a dedicated p tag for the emphasised stuff.<em>Some emphasised stuff</em>Some stuff.</p>
<p>Now do have a dedicated p tag for the emphasised stuff.</p>
<p><em>Some emphasised stuff</em></p>
<p>Some stuff.</p>
</div>
</div>
</div>
</body>
</html>
Hi everyone, I am new to this website as well as CSS for the most part. I have been working on a wordpress themed website recently trying to learn as much as possible. My website is self-hosted currently so can't really give you a link to view my code. I just discovered the CSS validator and I validated my CSS file. It contains 13 errors (yikes!) and 16 warnings. However, I don't really know how to interpret it. I use notepad++ as an editor. The profile I used is CSS level 2.1: EDIT: Here is the new code for CSS 3. I only copied the errors part. Code: 23 .socialmedia img Property -webkit-transition doesn't exist : all 0.2s ease-in all 0.2s ease-in 24 .socialmedia img Property -moz-transition doesn't exist : all 0.2s ease-in all 0.2s ease-in 25 .socialmedia img Property transition doesn't exist : all 0.2s ease all 0.2s ease 38 .socialmedia img.fade:hover Property -moz-opacity doesn't exist : 1 1 39 .socialmedia img.fade:hover Property -webkit-transition doesn't exist : all 0.2s ease-in all 0.2s ease-in 40 .socialmedia img.fade:hover Property -moz-transition doesn't exist : all 0.2s ease-in all 0.2s ease-in 41 .socialmedia img.fade:hover Property transition doesn't exist : all 0.2s ease all 0.2s ease 60 #main-nav-search Value Error : padding-top -1.0 negative values are not allowed : -1px -1px 79 .menu2-top-right Value Error : border Too many values or values are not recognized : solid 0 1px 1px 1px #000 solid 0 1px 1px 1px #000 80 .menu2-top-right Property -moz-border-radius-bottomright doesn't exist : 10px 10px 10px 10px 82 .menu2-top-right Property -moz-border-radius-bottomleft doesn't exist : 10px 10px 10px 10px 87 .menu2-top-right Property -moz-box-shadow doesn't exist : 3px 3px 6px #7f7f7f,8px -10px 10px #7f7f7f 3px 3px 6px #7f7f7f,8px -10px 10px #7f7f7f 88 .menu2-top-right Property -webkit-box-shadow doesn't exist : 3px 3px 6px #7f7f7f,8px -10px 10px #7f7f7f 3px 3px 6px #7f7f7f,8px -10px 10px #7f7f7f What does it mean when it says "doesn't exist"? This should be easy, but I think I'm getting screwed by how the browsers are loading and layering the css. Here's my code: Code: <a href="/somepage" class="WhiteTextClass">somepage</a> The anchor tag sets the link color to blue. My WhiteTextClass then sets it to white. This works. However, the visited link color is assigned as the same blue. When the link is visited it no longer takes the white color the class is assigning, it's going back to blue. Am I right that it's the browser and the order it applies the css attributes, or am I doing something wrong? This is based directly off of Eric Mayer's pure css popups. I know he states in his img tutorial "...considering that even if we used the display: none/display: block trick in the SPAN-popup demo, Explorer has trouble.", but the fact I have it working flawlessly for the first piece of code gives me hope. Of note -- for better or worse, I intentionally put IE6 in quirks mode with <?xml version="1.0"?> right before my doctype. I know it's not the best idea in the world, but it means my code works completely as intended for IE5/5.5/6, and all other browsers I've been able to test (firefix/opera -- windows). Code: HTML: <li><a href="#">F. A. Q.<span>We understand there's going to be some questions -- check here and you might find some answers or how-to's.</span></a></li> <li><a href="#">Help Desk<span>Couldn't find an answer to your question? Find a non-serious glitch or bug? Feel free to head to our support desk and create a ticket. We'll be in touch with you promptly about your question or concern.</span></a></li> <!-- Repeat, roughly 10 links, some of which are in submenus - all work as expected --> Code: CSS:
#mainMenu li a span { display: none; }
#mainMenu li a:hover span {
display: block;
position: absolute;
top: 152px;
right: 32%;
} /* For posting I removed the formatting tags like border, padding etc */
That works as expected. Upon rolling over the link, the span is displayed, positioned absolutely elsewhere on the page. On rollout, it hides again. However, when I cut and paste that CSS and change only the anchor i'm referencing: Code: HTML: <td> <a href="#" class="date"> 08/06/06<span>August 6th, 2006 -- 8:09am</span> </a> </td> <!-- I have roughly 20 cells identical to that, but with different dates. Yes, there's good reason for using tables :p --> Code: CSS:
a.date span { display: none; }
a.date:hover span {
display: block;
position: absolute;
top: 0px;
left: 0px;
}
a.date:hover { color: red; }
/* Again, I removed formatting */
It works as expected in everything except IE. I thought this is because IE doesn't like the fact i'm adding a class to the anchor... a.date:hover span ... but even when I remove the .date a:hover works and a:hover span doesn't. What's going on? Thanks in advance, Brett Hi All: When i use <ul><li> and <li> is set to "list-style-type: none;" IE and Firefox renders it differently. Does anybody know a work-around for this? The good example of this and the CSS code is at following holzgreen.com/list-test/ HTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>List Test 1</title> <meta name="Description" content="x.x.x. CHANGE .x.x.x"> <meta name="KeyWords" content="x.x.x. CHANGE .x.x.x"> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <META name="Publisher" content="Firework Studio"> <META name="revisit-after" content="15 days"> <META name="robots" content="index, follow"> <META name="Robots" content="All"> <link href="000-style.css" rel="stylesheet" type="text/css" /> <style type="text/css"> <!-- .style1 { font-family: "Courier New", Courier, monospace } --> </style> </head> <body> <div #none> <ol> <li>List item - 1</li> <li>List item - 2 <ol> <li>LI - 2.1</li> <li>LI - 2.2</li> </ol> </li> <li>List item - 3</li> <li>List item - 4</li> </ol> </div> </body> </html> CSS: body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 1em; border: 1px solid #000000; margin: 0em; padding: 0em; } #none ol { background: #BB0000; list-style-position: inside; margin: 0em; padding-left: 1em; /* Moves the Whole List */ } #none ol ol{ background: #BB00BB; list-style-position: inside; margin-left: 0em; padding-left: 3em; /* Moves the Nested List */ } #none ol li { background: #BBBB00; font-size: .8em; margin-left: 0em; list-style-type: none; } #none ol ol li { background: #00BBBB; font-size: 1em; list-style-type: lower-alpha; margin-left: 0em; list-style-type: none; } Thanks for your interest I'm working on a site (here) that has a two column style layout. Everything works fine in almost any browser OTHER than IE... In IE, the main (right) column shifts so that it is below the content length of the left (floated) column. I want them to be side by side... I've been playing with different solutions for several days. Can anyone help? (link to css file). relevant html: Code: <div id="wrapper"> <div id="container"> <div id="content"> <div id="left"> <!-- Left Block Start --> <!-- Left Sidebox Start --> <!-- Left Sidebox End --> <!-- Left Block End --> </div> <div id="main"> <!-- Center Sidebox Start --> <!-- Center Sidebox End --> <!-- BEGIN: Default News-index Article --> <!-- END: Default News-index Article --> </div> </div> </div> <div class="clearing"> </div> </div> relevant css: Code: /* styles to create table-less layout */
#wrapper {
padding-top:10px;
background-color: white;
text-align:center;
}
#container {
width: 770px;
height: auto;
margin: 0 auto 0 auto; /* sets the left and right margins to auto for everything else */
border-top: 1px solid white;
}
#content {
/*width: 770px; */
text-align:center;
}
#main {
text-align: left;
margin-left: 175px;
width: 595px;
}
#left {
text-align: left;
float: left;
width: 160px;
}
/* utility clearer class */
.clearing {
height: 0px;
clear: both;
}
thanks in advance for the help! Hi, I'm trying to write a simple website but I can't get it to run correctly in Internet Explorer. It looks fine in Firefox and Safari, but in IE none of the CSS is used, it looks like a regular html document. I've run the Validations for both files and they pass (aside from the html file throwing errors about the css styles). Here is my code: 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=utf-8"> <title>TITLE</title> <link rel="stylesheet" type="text/css" href="style.css"> <!-- Date: 2009-08-10 --> </head> <body bgcolor="#D5D5D5"> <center> <banner> <img src="toptile.jpg" height="150px" width="100%" alt="topbanner"> </banner> <br> <logo> <img src="bannerlogo.png" alt="logo"></logo> <navbar> <img src="navbar.png" width="100%" height="650px" alt="background"> </navbar> <blackbar><img src="black.png" width="100%" height="20px" alt="blackbox"></blackbar> <br> <middle> <table border="0" width="800px" cellpadding="10" bgcolor="#DBFBFF"> <tr> <td width="50%" valign="top"> <br><br><br><br><br> <center> Coming Soon... </center> </td> </tr> </table> </middle> </center> </body> </html> and the CSS: Code: logo
{
position:absolute;
display:block;
margin-left: auto;
margin-right: auto;
top:10px;
width:100%;
z-index:3;
}
banner
{
position:absolute;
top:-10px;
left:-10px;
right:0px;
z-index:2;
}
middle
{
position:absolute;
display:block;
top:100px;
margin-left: auto;
margin-right: auto;
width:100%;
z-index:1;
}
navbar
{
position:absolute;
top:140px;
left:0px;
right:0px;
z-index:-1;
}
blackbar
{
position:absolute;
top:140px;
left:0px;
right:0px;
z-index:4;
}
I realize I'm probably not using all the best practices, but it displays fine on everything but IE. Can someone please help me out here. Thanks I am at a total loss on this one. I'm trying to create a simple inline unordered list menu - no problems there - I've done that plenty of times. However, this time I would like my menu to have a border around it instead of being a plain box. As soon as I add the 'border-style:solid' modifier to the div, the text misaligns straight down, roughly 15px lines, out of the box. This happens on Firefox (and apparently on Opera as well, though I haven't checked that one myself). At this point I've stripped the page to bare bones, switched from transitional to strict, tried float vs not, tried margins vs 0 margins, and padding vs 0 padding, relative vs absolute, and attempted to manually shift the text through negative positions as well. No joy. Css: Code: /* Navigation */
#nav {
width: 821px;
height: 18px;
border: 1px;
border-style: solid;
border-color:red;
}
#nav ul {
}
#nav li {
display:inline;
float:left;
background-color:#9E0C0C;
text-align:center;
color:white;
font-family: arial, san-serif;
font-size: 14px;
font-variant: small-caps;
}
and page: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" > <link href="style.css" rel="stylesheet" type="text/css" media="screen"> </head> <body> <div id="nav"> <ul> <li>Home</li> <li>XXX</li> <li>XXX</li> <li>CCC</li> <li>HHH</li> <li>JJJ</li> <li>kkk</li> <li>KKK</li> </ul> </div> </body> </html> (As I said, I've stripped it to absolutely nothing else.) Any suggestions would be welcome. (ETA: Also tried changing text size in case a too-large font size was making the text 'pop out' of the box. That is also not it.) I don't know what's wrong, but this HAS to be something simple I'm missing. In my XHTML I have Code: <div class="curved"></div> and for the CSS I have Code:
.curved {
background-image: url(Green_wavy_thing.jpg);
background-color: #ffffff;
background-repeat: no-repeat;
}
The image isn't even displaying in any browser. What am I missing? I've tried quotes, etc to no avail. Is my code wrong? The image is in the same directory as the html and CSS files. Thanks, Chris I'm working on a client's website and trying to get the navigation menu to look right in firefox, for some reason it seems to ignore all width properties and the table cells overlap, but only in firefox. IE displays it perfectly, any help would be appreciated. www.entsource.com/hcs/ It is source viewable and the css code follows: a.nav { color: black; text-decoration: none; border: 1px solid #6D92A2; width: 150px; padding: 2px; font-family: tahoma; font-size: 11pt; text-align: center; } a.nav:hover { color: #F80808; text-decoration: none; border: 1px solid #F80808; width: 150px; padding: 2px; font-family: tahoma; } table.pane { width: 900px; } td.nav-cell { width: 155px; border-right: 2px solid #6D92A2; } td.main { width: 750px; padding: 10px; } hr { color: #6D92A2; height: 1px; width: 400px; } strong.header { color: white; background-color: #CCCCCC; width: 700px; height: 20px; border-top: 1px black solid; border-bottom: 1px black solid; font-size: 16pt; font-family: tahoma; } strong.bold { color: black; font-size: 16pt; font-family: tahoma; } I've losing my mind on this. When I look at the following layout in IE6, the "matterR" DIV background color is filling up the entire "content" DIV -- as opposed to staying in its container DIV ("columnR") like I need it to. Any idea why it's bigger than it's container DIV? Code: #content { margin-right: 10px; margin-bottom: 5px; margin-left: 10px; width: 780px; overflow: hidden }
#columnR { width: 595px; height: 308px; float: right; overflow: auto }
#matterR { background: #6d6f71; padding: 20px 20px 40px 70px }
<div id="content">
<div id="columnR">
<div id="matterR">Scrolling text content here...</div>
</div>
</div>
Keep in mind that I can't really assign a pixel width to "matterR" -- as its container DIV needs to scroll vertically. It seems if I assign a pixel width, it want to scroll horizontally to compensate for the scrollbar. Any ideas? Thank you! Hi, I have a simple question. Is it possible to display and hide a list if i click on a link using CSS? I'm not looking to change pages or anything. I know it can be done using Javascript but I would rather not use it. I've done a few searches for hiding lists in CSS but to no avail. Thanks, I am sure that this is no surprise to many of you and hope that someone kind help me find a solution. I am having trouble displaying a drop down CSS menu in IE7, it seems to work fine in Firefox. Please advise and thank you for all your help with this. I have spent far too much time on this and still can't figure it out. Website is located at: myasvn.org/_/campusrec/temp.php PHP Code: /* Navigation Menu */ ul#menu { background: rgb(63, 69, 76) url('../_media/bk-menu.png') repeat-x; list-style-type: none; list-style-image: none; list-style-position: outside; width: 950px; height: 34px; display: block; line-height: 34px; z-index:2; } ul#menu li a { display: block; color: rgb(255, 255, 255); text-decoration: none; text-align: center; } ul#menu li a:hover, ul#menu li:hover { background-color: rgb(53, 60, 66); } ul#menu li { border-right: 1px solid rgb(53, 60, 66); float: left; } ul#menu li ul { position: absolute; left: -999em; background-color: rgb(238, 238, 238); width: 165px; list-style-type: none; list-style-image: none; list-style-position: outside; } ul#menu li li { border-right: medium none; width: 157px; float: left; line-height: 30px; } ul#menu li li a { border-bottom: 1px solid rgb(210, 210, 210); width: 157px; color: #000000; text-decoration: none; text-align: left; padding-left: 8px; display: block; } ul#menu li li a:hover { color: rgb(255, 255, 255); background-color: rgb(204, 0, 0); } ul#menu li:hover ul { left: auto; } ul#menu li:hover ul, #menu li.sfhover ul { left: auto; } I have a small box displayed at the top of the page for an "anouncment column". Opera and IE show it properly, sort of, and NEtscape/mozilla show it further down the page. I want it to be at the VERY top of the page, IE/Opera show it a few px down and mozilla/netscape show it a good 10+ down. I have tried playing with padding and it made no difference. These browsers are the new versions. any ideas? Code: <div style="position: absolute; left: 617px; top; 0px; width: 147px; height: 30px; background-color: transperant; padding: 0px;"> <h5>text is here</h5> </div> the style sheet Code: body {
color: #000000;
background-color: #ffffff;
font-family: Georgia, "Times New Roman",
Times, serif;
}
}
h1 {
FONT-WEIGHT: bold;
text-align: center;
font-size: 30px }
h2 {
FONT-WEIGHT: bold;
text-align: center;
font-size: 25px }
h3
{
FONT-WEIGHT: bold;
text-align: center;
font-size: 20px }
h4
{
FONT-WEIGHT: normal;
text-align: center;
font-size: 15px }
h5
{
padding: 0px;
FONT-WEIGHT: normal;
text-align: center;
font-size: 12px }
h6
{
FONT-WEIGHT: normal;
text-align: center;
font-size: 9px }
p {
FONT-WEIGHT: normal;
text-align: left;
FONT-WEIGHT: normal;
color: #000000;
font-size: 12px }
hr {color: #7d7c7c }
.right {text-align: right }
.center {text-align: center }
.left {text-align: left }
.uppercase {text-transform: uppercase}
.lowercase {text-transform: lowercase}
.capitalize {text-transform: capitalize}
A:visited {
COLOR: #802CFF; TEXT-DECORATION: underline
}
A:link {
COLOR: #2C31FF; TEXT-DECORATION: none
}
A:hover {
COLOR: #719FFE; TEXT-DECORATION: underline
}
A:active {
COLOR: #2C31FF; TEXT-DECORATION: underline
}
|
|||||||