|
CSS - Whats Wrong With My Divs?
http://65.26.50.204/ec/index3b.html
They look odd on the left and bottom, the margin seems to big, and there is no margin on the right or bottom, in firefox. In internet explorer it displays the way I want it too, but it adds scrollbars and expands the pages width and height, past where I want it to go. Any solutions? Similar TutorialsHi I am using an external stylesheet to try to format some text, but its not working. This is what is in my stylesheet? PHP Code: .small{ font-size: 11px; font-family: verdana, arial, tahoma;} I then used this: PHP Code: <span class="small"><font color="#000000">my text</font></span> But its not formatting it. Any ideas? This css looks great in IE, but in netscape, etc. its fubared. the positioning of the #leftcolumn is wayy out in the middle of the page instead of aligned like it should be and the right column is below the left column. Code:
body {
margin: 0;
padding: 0;
font-size: 12px;
font-family: 'Arial', 'Lucida Grande',
Verdana, Lucida, Geneva, Helvetica,
Arial, sans-serif;
background: #ccc url(/greydusk/images/bgtile.gif) repeat-y 50% 0;
}
#caption {
font-style: italic;
font-weight: bold;
padding-top: 5px;
}
#frame {
width:750px;
margin-right:auto;
margin-left:auto;
padding:0px;
text-align:left;
}
#header {
float: left;
width: 751px;
height: 55px;
background: #ccc url(/greydusk/images/header_back.gif);
}
#leftcolumn {
float: left;
width: 505px;
background:#fff;
margin-top: 0px;
margin-left: 2px;
padding-bottom:20px;
}
#title {
display: block;
font-weight: bold;
font-size: 15px;
}
#date {
float: left;
margin-left: -35px;
font-weight: normal;
color: #9C9C9C;
}
#leftcolumn p {
background: url(/greydusk/images/marker1.gif) no-repeat top left;
text-indent: 50px;
padding-left: 15px;
padding-right: 10px;
margin-top: 35px;
}
#rightcolumn {
float: left;
width: 235px;
margin-left: 5px;
}
#rightcolumn p {
padding-left: 15px;
padding-right: 15px;
}
#menu {
background-color: #000;
width: 751px;
font-size: 14px;
color: #FFF;
}
#menu ul {
list-style: none;
margin: 0 0 0 0;
padding: 0px;
}
#menu li {
float: left;
margin: 0 0 0 0;
padding-right: 15px;
padding-top: 4px;
padding-left: 15px;
padding-bottom: 7px;
}
#menu li a {
padding: 0px;
padding-bottom: 3px;
margin: 0 px;
color: #fff;
text-decoration: none;
}
#menu li a:hover {
border-bottom: 4px solid #7F88DA;
color: #7F88DA;
}
and here is the page. Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>test site</title>
<script type="text/javascript"></script>
<style type="text/css" media="all">
@import "/greydusk/css/greydusk.css";
</style>
</head>
<body onload="window.defaultStatus='test-site';" id="test">
<div id="frame">
<div id="header">
<p> </p>
</div>
<div id="menu">
<ul>
<li><a href="blah.htm">home</a></li>
<li><a href="blah.htm">news</a></li>
<li><a href="blah.htm">forums</a></li>
</ul>
</div>
<div id="leftcolumn">
<p><span id="title">Sample news title, hello there!</span>
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
<span id="date">March 1, 2004 | <a href="blah.com">Comments</a></span></p>
<p><span id="title">Sample news title, hello there!</span>
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
<span id="date">March 1, 2004 | <a href="blah.com">Comments</a></span></p>
<p><span id="title">Sample news title, hello there!</span>
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
<span id="date">March 1, 2004 | <a href="blah.com">Comments</a></span></p>
<p><span id="title">Sample news title, hello there!</span>
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
<span id="date">March 1, 2004 | <a href="blah.com">Comments</a></span></p>
<p><span id="title">Sample news title, hello there!</span>
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
<span id="date">March 1, 2004 | <a href="blah.com">Comments</a></span></p>
<p><span id="title">Sample news title, hello there!</span>
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
<span id="date">March 1, 2004 | <a href="blah.com">Comments</a></span></p>
<p><span id="title">Sample news title, hello there!</span>
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
<span id="date">March 1, 2004 | <a href="blah.com">Comments</a></span></p>
</div>
<div id="rightcolumn">
<p>BLAH BLAH BLAH BLAH</p>
<p>BLAH BLAH BLAH BLAH</p>
<p>BLAH BLAH BLAH BLAH</p>
<p>BLAH BLAH BLAH BLAH</p>
<p>BLAH BLAH BLAH BLAH</p>
<p>BLAH BLAH BLAH BLAH</p>
</div>
</div>
</body>
</html>
thanks in advance! this thing is frustrating me to no end! and i just no it's a simple 1 or 2 lines i need to change. =( Hi I have floated two boxes next to each other http://www.sussexfind.co.uk/test/ (left and right) I have put a class "clr" after them, when viewed in IE the gap between the footer and the rounded boxes is greater than when viewed in Firefox. Does anyone know why this is? Thanks I know its a bit vague but if someone can actually HINT on what is wrong with the design as it looks ok in FF and IE7 and major other browsers however in IE6.0 the divs (basket and best seller and donate) have moved to the right a bit more. In Opera9.0 it looks very messy. IE: http://browsershots.org/screenshots...1b07da5ea24003/ Opera: http://browsershots.org/screenshots...e171bac56fbf14/ Original: http://www.zahra-zahra.com/aboutus.php Ok, so I've learned to stay away from tables when you don't need them, and I have an instance where this is the case. I have a container div that has a header, content and a footer. On my home page, I have to divs next to each other with the same height and a div below them towards the right. To simplify my problem, look at this example. Code:
<html>
<body>
<div style="float:right">
Hello there!
</div>
<hr>
</body>
</html>
If there's a "float:right" on that div, the hr tag below doesn't get pushed down. But if I use relative positioning and don't use the floats, I can't put the two top divs next to each other. The other option is to use absolute positioning, but again content below doesn't get pushed down correctly. It seems that using "clear:both" works, but it seems weird that this has to be done. For example if I have floating divs in a container, I can get them to stretch out the container like so: Code:
<html>
<body>
<div style="border: 1px solid #000; ">
<div style="float:right">
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
</div>
<div style="clear: both"></div>
</div>
<hr>
</body>
</html>
Am I missing something fundamental here? Is there a better solution? Thanks in advance. Centering DIVs inside other DIVs in Firefox? Can it be done in a straight forward way? Setting the inner DIVs float to none seemed to work for IE but not FF. Here's the site in Question: http://www.winchps.vic.edu.au It's a standard fixed width floated DIV columns with a wrapper. One thing it does have is a second DIV inside both columns to display the Gradient background over the top of the repeated background. It works perfect in Firefox & IE7 (with a tweak) but IE6 mkes the sidebar nested div drop below the original sidebar DIV click here for a screenshot for those lucky enough not to have IE6. Here's the CSS code for the basic layout: Code:
body {
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
font-size: 12px;
text-align: center;
margin: 0px 0px 60px 0px;
padding:0px;
border: 0;
line-height: 2;
}
#header {
width: 802px;
}
#wrapper {
width: 802px;
margin:0px;
padding: 0px;
text-align: left;
margin: 0 auto;
background: url(images/bodybg.jpg) center repeat-y;
}
#content {
padding: 0px;
margin: 0px;
}
#maingrad {
background: url(images/winchcontentgrad.jpg) top left repeat-x;
padding: 10px;
}
#main {
width: 589px;
float: right;
background: url(images/winchcontentbg.jpg) repeat;
border-left: solid 1px #000;
border-right: solid 1px #000;
}
#mainstop {
width: 589px;
float: right;
background: url(images/winchcontentbg.jpg) repeat;
border-left: solid 1px #000;
border-right: solid 1px #000;
border-bottom: solid 1px #000;
font-size: 10px;
}
#sidebargrad {
background: url(images/winchsidebargrad.jpg) top left repeat-x;
padding: 10px 5px 0px 10px;
}
#sidebar {
width: 200px;
float: left;
background: url(images/winchsidebg.jpg) repeat;
line-height: 2;
font-size: 14px;
border-left: solid 1px #000;
border-right: solid 1px #000;
}
I obviously need to put a conditional comment in there, same for what I did for the minor IE7 tweak, but I'm struggling to suss out what's causing it, I haven't found the specific issue on any of the regular sites (PIE etc). Anyone got any ideas? Hi all Can any one help, I have built a webpage and it looks fine in firefox but not in IE. Have a look http://pfwd.org.uk/style.htm I have no idea whats up with it. I have tried to vaildate the page with w3c and it comes up saying that a a href tag should not between div tags or something along those lines. (this is for the "go" link). Ths css is vaild and checked http://pfwd.org.uk/style.htm http://pfwd.org.uk/style.css The htm code: PHP 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> <title> </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="style.css"type="text/css" /> </head> <body> <div class='main'> <div class='header'>Updates to the site</div> <div class='subHeader'>Search for an update</div> <div class='dbItem' style='left:180px; width: 239px; height:22px; float:left'> <form name="search" method="post" action="post"> <select name="Year"> <option>Year</option> <option>2005</option> <option>2004</option> <option>2003</option> <option>2002</option> <option>2001</option> <option>2000</option> </select> <select name="Month"> <option>Month</option> <option>January</option> <option>Febuary</option> <option>March</option> <option>April</option> <option>May</option> <option>June</option> <option>July</option> <option>August</option> <option>September</option> </select> <input type="submit" name="Submit" value="Search" /> </form> </div> <!-- Start on the fly scripts --> <p> <div class="link"><a href='#' class='links'>GO</a></div> <div class='dbdescripHeader'>Description of update</div> <div class='dbdescripItem'>text goes here text goes here</div> <div class='dbHeader'>Number</div> <div class='dbItem'>one</div> <div class='dbHeader'>Date</div> <div class='dbItem'>10/01/01</div> </p> <!-- End on the fly scripts --> </div> </body> </html> th style code: PHP Code: body{ background-color:#006699; font-family:Arial, Helvetica, sans-serif; } .main, header, subHeader{/*Positon values that make every thing go inside the main box */ position:absolute; left:100px; } .main, subHeader dbItem{ border: solid 1px #0099CC; } .main, header{ top:125px; left:140px; width:451px; } .main{ height:300px; } .header{ background-color:#0099CC; font-size:12px; font-weight:800; } .subHeader{ height:22px; width:200px; border: solid 1px #0099CC; background-color:#FFCC66; float: left; font-size:10px; font-weight:700; padding: 2px; } .dbHeader{ border: solid 1px #0099CC; background-color:#FFCC66; font-size:10px; font-weight:600; padding: 2px; width: 50px; } .dbItem{ background-color:#FFFFFF; border: solid 1px #0099CC; font-size:10px; font-weight:700; padding: 2px; width:50px; } .dbdescripHeader{ border: solid 1px #0099CC; background-color:#FFCC66; font-size:10px; font-weight:600; padding: 2px; width: 364px; float:right; } .dbdescripItem{ background-color:#FFFFFF; border: solid 1px #0099CC; font-size:10px; font-weight:700; padding: 2px; width:50px; width: 390px; float:right; height:48px; } .link{ font-size:11px; font-weight:700; font-family:Arial, Helvetica, sans-serif; padding:2px; color:#0099CC; text-decoration:none; float:right; } .links{ background-color:#006699; border: 1px solid #0099CC; border-top:1px solid #0099CC; color:#0099CC; text-decoration:none; padding:0 2px; } .link a:hover{ font-size:11px; font-weight:700; font-family:Arial, Helvetica, sans-serif; padding:0 2px; text-decoration:none; color:#FFCC66; background-color:#006699; } br{ margin-top:-15px; } p{ height:1px; } Thanks PFWD Whats the best CSS Tutorial you ever seen? I want to improve more on my web design so I want to know what CSS tutorial was the best? It can be anything like making a horzontal menu or best looking form. I dont care what it is... Thank you. The Example I've read a bunch about how div's won't stretch to accomidate div's inside of them if they overrun the height/min-height set for the container div. How do I get around this? You can see the skeleton of the site above. It's fine unless you resize the window smaller than the content. What is the method to have a div expand to wrap all the elemetns inside it ? somethings work in IE, some work in Firefox and some work in Safari. I then apply the size to each page separately, but now I have also found out that browsers interpret px differently it seems. my page is www.mmimageart.com, you can go and see in the galleries how if you are using safari, the container div is not wrapping the elements inside. So any help would be appreciatted. Thanks. Alright, I've been working on my own custom border box for a while and I've almost got it, but it has a few problems still. How I do it is I have one div that contains it all (.box) that defines the height and width of the whole box. Then I have three boxRows to lay out the images, and then I define how three cells in each of those rows should behave, very much like how custom borders used to be done with tables. Here are the problems: In both firefox and internet explorer, the bottom row and the far right column actually appear OUTSIDE the .box containing box. There are two additional problems in internet explorer. First, the middle row handles the auto height differently and only expands about 10px instead of the height of the containing box. The second is that the whole middle row for some reason appears to be pushed to the right by about 16px. Any help would be appreciated. Here's the code: HTML: Code: <html> <head> <link rel="stylesheet" type="text/css" href="reset.css" /> <link rel="stylesheet" type="text/css" href="testBox.css"> </head> <body> <div class="box"> <div class="boxRowTop"> <div class="boxCellLeft"></div> <div class="boxCellMiddle"></div> <div class="boxCellRight"></div> </div> <div class="boxRowMiddle"> <div class="boxCellLeft"></div> <div class="boxCellMiddle"></div> <div class="boxCellRight"></div> </div> <div class="boxRowBottom"> <div class="boxCellLeft"></div> <div class="boxCellMiddle"></div> <div class="boxCellRight"></div> </div> </body> </html> And here is the layout css file: Code: /* Box classes */
.box {
background: rgb(120,120,120);
height: 200px;
width: 500px;
}
.boxRowTop {
height: 16px;
position: relative;
width:%100;
}
.boxRowMiddle {
height: auto;
width:%100;
position: relative;
}
.boxRowBottom {
height: 16px;
width:%100;
position: relative;
}
.boxCellLeft {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 16px;
}
.boxCellMiddle {
height: 100%;
margin-left: 16px;
margin-right: 16px;
width: auto;
}
.boxCellRight {
height: 100%;
left: 100%;
position: absolute;
top: 0;
width: 16px;
}
/* Define Cell Backgrounds/Images */
.boxRowTop .boxCellLeft {
background: url(../LandingImages/topleft_circ_corner.png) no-repeat;
}
.boxRowTop .boxCellMiddle {
background: url(../LandingImages/top_border.png) repeat-x;
}
.boxRowTop .boxCellRight {
background: url(../LandingImages/topright_circ_corner.png) no-repeat;
}
.boxRowMiddle .boxCellLeft {
background: url(../LandingImages/left_border.png) repeat-y;
}
.boxRowMiddle .boxCellMiddle {
background: rgb(255,255,255);
}
.boxRowMiddle .boxCellRight {
background: url(../LandingImages/right_border.png) repeat-y;
}
.boxRowBottom .boxCellLeft {
background: url(../LandingImages/bottomleft_circ_corner.png) no-repeat;
}
.boxRowBottom .boxCellMiddle {
background: url(../LandingImages/bottom_border.png) repeat-x;
}
.boxRowBottom .boxCellRight {
background: url(../LandingImages/bottomright_circ_corner.png) no-repeat;
}
And last, the reset CSS, which I don't think has anything to do with the problems because if I take it out it still has them. Code: html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, tt, var, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, caption
{
margin:0;
padding:0;
border:0;
vertical-align:baseline;
}
* {font-size:1em; font-family: inherit;}
:focus {outline:none;}
body { font-size: 62.5%; line-height:normal; font-family: Arial, Sans-Serif; color:Black; } /* 62.5% (10px), 75% (12px), 87.5% (14px), 100% (16px) */
p { margin: 0 0 1.2em 0; }
a { color:#ff0000; text-decoration:none; }
a:link { color:#ff0000; text-decoration:nonee; }
a:visited { color:#ff0000; text-decoration:none; }
a:active { color:#ff0000; text-decoration:none; }
a:hover { color:#ff0000; text-decoration:none; }
a.h1,a.h2,a.h3,a.h4,a.h5,a.h6,h1,h2,h3,h4,h5,h6
{
font-weight:bold;
display:block;
text-decoration:none;
color:Black;
}
h1, a.h1, a:link.h1, a:visited.h1, a:active.h1, a:hover.h1 { color:Black; text-decoration:none; font-size: 2.00em; }
h2, a.h2, a:link.h2, a:visited.h2, a:active.h2, a:hover.h2 { color:Black; text-decoration:none; font-size: 1.75em; } /* this is normally skipped? 1.50em */
h3, a.h3, a:link.h3, a:visited.h3, a:active.h3, a:hover.h3 { color:Black; text-decoration:none; font-size: 1.50em; } /* 1.25em */
h4, a.h4, a:link.h4, a:visited.h4, a:active.h4, a:hover.h4 { color:Black; text-decoration:none; font-size: 1.25em; } /* 1.00em */
h5, a.h5, a:link.h5, a:visited.h5, a:active.h5, a:hover.h5 { color:Black; text-decoration:none; font-size: 1.00em; } /* 0.75em */
h6, a.h6, a:link.h6, a:visited.h6, a:active.h6, a:hover.h6 { color:Black; text-decoration:none; font-size: 0.75em; } /* 0.66em WTF? */
fieldset { border:solid 1px; padding:0.25em 0.5em 0.75em; margin: 0 0 1.5em; }
legend { margin:0 0 0 2em; padding:0 1em; }
textarea, input, select { border:solid 1px #ccc; margin:0; padding:0; }
textarea, input { padding:0 .2em; }
input:focus,textarea:focus,select:focus { border:solid 1px black; }
small { font-size:.9em; }
ul, ol, dl { position: relative; padding:0 0 0 1.5em; margin:1.5em 0; }
dir, menu { margin:1.5em 0; }
/* nested lists have no top/bottom margins */
ul ul, ul ol, ul dir, ul menu, ul dl,
ol ul, ol ol, ol dir, ol menu, ol dl,
dl ul, dl ol, dl dir, dl menu, dl dl,
dir ul, dir ol, dir dir, dir menu, dir dl,
menu ul, menu ol, menu dir, menu menu, menu dl
{
margin:0;
padding: 0 0 0 1.5em;
}
hr { margin:0.75em 0; padding:0; }
Any help would be GREATLY appreciated, as I've been working on this for a while! Thanks! Hi be gentle with me im new I am trying to put a backgroung image in my div the code i have used is below, in my styles file i have .backgroundbox { background-attachment: fixed; background-image: url(backpat1.png); background-repeat: no-repeat; background-position:top; height:600px; width:900px; position:relative; background-position: top left; top: 0px; left:0px;} and in the body i have <div class="biggestcolumn" "backpat1" align="center"> if someone could please tell me what ive done wrong. O.K. Here is my style sheet code ... Code: <style type="text/css">
channel-container
{
background-color:#66FF66;
width:500px;
margin:auto;
clear:both;
}
.channel
{
background-color:#CCFF00;
width:465px;
margin:auto;
}
.channel#
{
background-color:#99CC99;
width:35px;
margin:auto;
}
</style>
and here is some of the html .... Code: <div class=channel-container> <div style=channel>A&E</div> <div style=channel#>118</div> </div> <div class=channel-container> <div style=channel>ABC Family</div> <div style=channel#>180</div> </div> <div class=channel-container> <div style=channel>America Live</div> <div style=channel#>219</div> </div> <div class=channel-container> <div style=channel>Angel One</div> <div style=channel#>262</div> </div> <div class=channel-container> <div style=channel>Angel Two</div> <div style=channel#>266</div> </div> <div class=channel-container> <div style=channel>Cartoon Network (East)</div> <div style=channel#>176</div> </div> <div class=channel-container> <div style=channel>Cartoon Network (West)</div> <div style=channel#>177</div> </div> Now believe me I know this is not aesthetically appealing ... However I am just trying to get a base layout where I have a container I can change the background color on, or alter as I wish in the future. Then I want the channel name to show up, with the channel number in a separate cell .. All easily changable at will through the CSS rule modifications. Can anyone tell me what it is I am doing wrong here ? I am getting no formatting at all with the code I am using. This may not belong here. But it's about a CSS file, so I'll explain: I have css files in that are not having any effect. Using Firebug, I think I've narrowed the problem down to a server-side issue. Here are my headers: Request: Host: host User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2.6) Gecko/20100625 Firefox/3.6.6 Accept: text/css,*/*;q=0.1 Accept-Language: en-us,en;q=0.5 Accept-Encoding: gzip,deflate Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 Keep-Alive: 115 Connection: keep-alive Referer: https:/host/page Cookie: ........... Response: Date: Tue, 27 Jul 2010 18:34:59 GMT Server: Apache/2.2.3 (Red Hat) X-Powered-By: PHP/5.1.6 Content-Length: 2613 Connection: close Content-Type: text/html; charset=UTF-8 It looks like the server is delivering the css file as text/html and the browser is not interpreting the css styles. Other css files work. For example (main.css): Request: Host: host User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2.6) Gecko/20100625 Firefox/3.6.6 Accept: text/css,*/*;q=0.1 Accept-Language: en-us,en;q=0.5 Accept-Encoding: gzip,deflate Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 Keep-Alive: 115 Connection: keep-alive Referer: https://host/page Cookie: ..... Response: Date: Tue, 27 Jul 2010 18:34:59 GMT Server: Apache/2.2.3 (Red Hat) Last-Modified: Tue, 27 Jul 2010 16:21:07 GMT Etag: "136d7c-cba-e36a82c0" Accept-Ranges: bytes Content-Length: 3258 Connection: close Content-Type: text/css My server is Apache 2.2.3. I've tried adding "AddType text/css .css" to the httpd.conf file. But that had no effect. Any suggestions? Hello all, I am completely new to web development and am trying to learn by building my own website. The issue I have run into is getting my css to work on my page. HTML: <html> <head> <LINK rel="stylesheet" type="text/css" href="style.css"> <title> The Shore Report </title> </head> <body> <img src="TheShoreReport.jpg" > <img src="Web Background.jpg" > </body> </html> CSS: body { background-color:#b0c4de; } Is there something wrong with my link or what? hey all, i am working on new site but it is displaying wrong in IE (surprise surprise). i have been playing around to see if i can get it sorted but am not having any luck, if anyone can offer an idea that would be appreciated. here is the CSS Code:
<style type="text/css">
html, body {padding: 0;
color: #000; background: #eee;
font-family: Arial, Veranda, sans-serif;
margin: 0 140px 0 140px;}
h1 {color: #FFF; background: url('smallpardimg.jpg') center no-repeat #eef;
font: bold 200%/1em Arial, Verdana, sans-serif;
padding: 3em 1em 0; margin: 0 0 0 0;
border-left: 1px solid gray; border-right: 1px solid gray;}
#main {font-size: small; color: #AAA; background: #FFF;
margin: 0; padding: 2.5% 12.5%; clear: left;
border-top: 1px solid gray;}
#nav {margin: 0; padding: 0 0 0 0; float: left; background-color:#eef; border-left: 1px solid gray;
border-right: 1px solid gray;}
#nav li {list-style:none; float: right;
font-size: 12px; line-height: 20px; white-space: nowrap;}
#nav a {display: block; float: left; padding: 0 10px 0 10px;
text-decoration: none; font-weight: normal;
border: 1px solid; border-color: #EEF #EEF #EEF #EEF; color: #333; width: .1em;}
html>body #nav a {width: auto;} /* fixes IE6 hack */
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#nav a {float: none;} /* End IE5-Mac hack */
#nav a:hover {background-color: #eef; color: #ccc;
border-color: #eee #CCC #eee #ccc;}
</style>
and here is how it is being used in the html Code: <h1></h1> <ul id="nav"> <li><a href="/render/">?</a></li> <li id="current"><a href="/newmed/">contact us</a></li> <li><a href="/photos/">about globalhotel</a></li> <li><a href="/design/">my account</a></li> <li><a href="/webdev/">hotels</a></li> </ul> <div id="main"> <p> Lorem ipsum, dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum, dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum, dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p> </div> and finally here is a link to the page where i am having probs. thanks in advanced RF I'm attempting to build my first purely-css site, and it's both exciting and quite frustrating. My latest frustration, after having found a 3-column format I like, is the footer. It looks fine in IE, but in Firefox its placement is entirely wonky - up under the header and behind the main content. Check it out at: http://www.theatrebayarea.org/v2/ and the css is he http://www.theatrebayarea.org/v2/css/default.css It does this whether I put the #footer <div> inside or outside the #frame <div>. Any ideas on why it's doing this, and how I could have it reliably appear at the bottom of the three columns? Thanks, Daniel Hello, I'm confused about how exactly to name classes in a specific situation. I'm getting unexpected results, and I'm not sure if it's browser support or my code. Does .classy a { something: something; } describe all anchors nested in an element with the class "classy"? Can I do that even? Or is it the same as .classy, a { something: something; } To describe two things that both have the same styles. Do I need comma's or is .classy .classless { something: something; } the same thing as .classy, .classless { something: something; } Thanks |
|||||||