|
CSS - Doctype Declaration Causing Css Formatting Issues
The following code contains a div tag with height and overflow specified. If the content inside the div causes the height to exceed 75px, the div will auto scroll.
My problem is that the second div (id=content_div) ignores the height/overflow rule assigned to its parent div and displays its content as if its parent div doesn't exist. Because of this, if you scroll the first div (id=scrolling_div), the content within "scrolling_div_2" remains on the page, ignoring the scrolling action of its parent, while the content within both scrolling_div_1 and scrolling_div_3 scroll correctly. If I remove the DOCTYPE declaration on line 1 (which I don't want to), the code below renders correctly, and the content inside "scrolling_div_2" scrolls in the same way that the other 2 scrolling_div tags do. I can't exactly remove the DOCTYPE declaration, aside from trying to be compliant, it breaks formatting elsewhere in my site. Any help of suggestions would be appreciate. 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" xml:lang="en" lang="en">
<title>Test Page</title>
</head>
<body>
<div style="height:75px;width:250px;overflow:auto;border:1px solid black" id="scrolling_div">
<div id="content_div_1" style="margin-top;15px;">hello</div>
<div style="border:solid #647aae;border-width:0 1px;background:#b0c0e6;" id="content_div_2">
<div style="position:relative;top:-1px;left:0;border:solid #647aae;border-width:1px 0 0;">
<div style="top:2px;border-width:0 0 1px;padding: .3em .3em .1em;">
asfd<br />
asfd<br />
asfd<br />
asfd<br />
</div>
</div>
</div>
<div id="content_div_3" style="margin-top;15px;">hello</div>
</div>
</body>
</html>
Similar TutorialsHi, I made an html document, and a css file, works allright, but when i delete the doctype declaration, it's not working correctly anymore -> the body width is gone, and my content is stretched, losing my left and right margins. Code: body {
font-family: Georgia, "Times New Roman", Times, serif;
color: #666666;
width: 710px;
margin-left: auto;
margin-right: auto;
font-size: 0.9em;
margin-bottom: 3em;
The problem is, that i will use this css file for an xml file, transformed by xslt, and the resulting html file doesn't have a doctype specification, that means i can't seem to add a doc spec and still keep my xslt file valid. any suggestions to solve this problem..? thanks a lot, jarra Please view: http://www.archanix.com/aib/about/ Notice the red square aib logo towards the bottom of the page. I have been successful in aligning the image to the bottom of the div. But because I'm using position:relative; bottom:72px; it pushes my footer down farther than I want. Any way i can get around that? Any help would be greatly appreciated. Thanks, Jesse I've having an issue with Firefox and my navbar. It's image based I can't find a way to exclude it from the hover state of a:hover { border-bottom:1px dashed #666;} When you hover over the links on the navbar, it shifts the page a bit and then back to normal when you leave the hover state. http://www.graphics-tech.com/concept There is the link for example. Thanks Hi all, very new at this so please pardon. I am attempting to format a series of 3 columns (using the CSS holy grail) into the main body of a .asp page. Everything goes smoothly, I have the columns looking exactly as I want them, however the style sheet appears to be causing problems with the header and footer of my asp page. Namely, it has caused the previously smoothed corner images (.gifs) in the header and footer to have a 90 degree thick white border around them. I assume that my style sheet for the body of the page is affecting elements in the header and footer as well, causing them to look odd. Is there a way to have a style sheet only affect part of my code locally and not all of it globally? Or make certain parts of my code immune to the style sheet via some sort of markup? Thanks! FYI for those interested: the style sheet I am trying to use to format my divs (frame(content left, content right, content center and content header)) is body { text-align:center; border:0px solid #000; } #frame { width:830px; margin-right:auto; margin-left:auto; margin-top:auto; padding:0px; text-align:left; } #contentleft { width:175px; padding:0px; left:auto; top:auto; float:left; background:#fff; border:0px solid #000; } #contentcenter { width:480px; padding:10px; float:left; text-align:left; background:#B7C8EE; } #contentright { width:175px; padding:0px; right:auto; top: auto; float:right; background:#fff; border:0px solid #000; } #contentheader { background:#345EA2; width:auto; } p,h1,pre { margin:0px 10px 10px 10px; } h1 { font-size:14px; padding-top:10px; } #contentheader h1 { font-size:14px; padding:10px; margin:0px; } #contentright p { font-size:10px} The .asp page I want to use this style sheet on is <!--#include file="headerauth.asp"--> <meta http-equiv="Content-Language" content="en-us"> <body topmargin="0" leftmargin="0"> <link rel="stylesheet" type="text/css" href="sddm.css" /> <link rel="stylesheet" type="text/css" href="box2.css" /> <STYLE> A:link {font-weight:bold} A:hover {background:white;} A:hover {background-color:white;} A:visited {color:green} A:active {color:red} </STYLE> <!--#include file="footer.asp"--> The sheet appears to be affecting both my headerauth.asp and footer.asp which I do not want it to do. Is there a way to stop it from propogating to both of these other files? Or perhaps wrap the code for each of these in some sort of a tag that tells it not to use the css? Ok, someone might want to change the title when they know what im on about. Take the following two declarations Code: margin-top: 20px; margin-bottom: 5px; border-top: 6px double #D7D7D7; border-bottom: 1px double #D7D7D7; Now surely i could condense these into 2 lines so my first question is at what point does the rotation start at when doing something like Code: margin-top: 20px 15px 12px 15px; i.e. which sides do those apply to. Secondly, is this actually possible? Hi Guys, I'm building a page, and the body has been given a background color. I have a container DIV, and within it are several divs that hold individual elements. I need the background of the container div and everything in it to remain white, regardless of the color of the body background. <!--- Body tag ---> body { background: #FF00AA; color: #000000; font: .8em arial, helvetica, sans-serif; margin: auto; padding:0px; } <!--- container div----> #pages { background-color:#FFFFFF; width: 900px; } <!--- nested container divs ---> #pages title { display: inline; width: 375px; float: left; padding:0 .25em .5em 0; } #pages categories { display: inline; width: 20%; float: left; padding:0 0 0 0; } But this isn't working.. What am I doing wrong here? I just need to make sure EVERYTHING's background is white when it's placed within the container div (pages). I'm fairly new at CSS, but I am stumped with an issue I am having getting my H1 and H2 tags to show a color. Now the problem. I have styled the Header tags in my CSS for a <div> tag that will contain the text on my page. They are to have the color of my navigation bar on the left of the page (value #cc0000). The nav bar is styled with a CSS created by a spry in Dreamweaver CS3. My text is styled by a separate CSS document (con-ed.css) which is found in a different directory. I created all of the style elements for my <h1> and <h2> tags and they look fine in Dreamweaver. But when I open the page in a Web browser such as Firefox, Safari, or Internet Explorer, all of the formatting of the tags displays EXCEPT the color value I mentioned above. I am guessing that I have a cascading issue going on, but I haven't been able to figure out where it would be. I am loading the con-ed.css stylesheet first, so its values should override any other sheets, plus there is no mention of <h1> or <h2> in the stylesheet for my navigation bar. Any help or suggestions you could give will be greatly appreciated! wncmacs I have an odd situation where the box for an anchor in a menu is extraordinarily large . . . IN MOZILLA! IE works as expected & displays correctly, but the Mozilla box is triggering the :hover half way in the content area! (See attachment) I'm a little baffled on this box situation, EVEN INCLUDING the box-sizing changes for both IE/Moz (box-sizing: border-box & -moz-box-sizing: border-box), still doesn't resolve the problem. Any feedback is greatly appreciated! Here is the relevant CSS: Code: body, html
{
min-width: 700px;
background: url(/_test/images/nav-filler.gif) repeat-y;
height: 100%;
font: 1.2em Verdana;
line-height: .8em;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
p, a, div
{
font-size: 76%;
padding: 0 10 0 0;
box-sizing: border-box
-moz-box-sizing: border-box;
}
#header
{
position: absolute;
top: 0;
left: 0;
margin: 0 0 0 0;
padding: 0 0 0 0;
z-index: 200;
/*border: 1px solid #0F2B5B;*/
}
#header-right
{
position: absolute;
top: 0;
right: 0;
z-index: 100;
width: 100%;
background: url(/_test/images/header-filler.gif) repeat-x;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
#content
{
position: absolute;
top: 154;
left: 163;
z-index: 300;
margin: 0 0 0 0;
padding: 0 10 0 0;
}
#left-nav
{
position: absolute;
top: 154;
left: 0;
right: 163;
margin: 3 0 0 0;
padding: 0 0 0 0;
max-width: 163;
display: block;
}
#nav-links
{
margin: 0 0 0 0;
padding: 0 0 0 0;
width: 133;
}
#left-nav a
{
color: #000000;
font: 69% Verdana;
background: url(/_test/images/nav-item3.gif) no-repeat 0px 0px;
margin: 0 0 0 0;
padding: 0 17 4 29;
width: 155;
text-decoration: none;
display: block;
box-sizing: border-box
-moz-box-sizing: border-box;
}
#left-nav a:hover
{
color: #FF0000;
background: url(/_test/images/nav-item3.gif) no-repeat 0px -50px;
}
#left-nav a:active
{
color: #FF0000;
background: url(/_test/images/nav-item3.gif) no-repeat 0px -100px;
}
#left-navContent
{
color: #000000;
font: 66% Verdana;
width: 163;
background: url(/_test/images/nav-item-filler.gif) repeat-y 0px 0px;
margin: 0 0 0 0;
padding: 0 30 4 29;
text-decoration: none;
}
.nav-itemBottom
{
margin: 0 0 0 0;
padding: 0 0 0 0;
}
.nav-header
{
color: #0F2B5B;
font: bold 80% Verdana;
margin: 00 20 0 0;
padding: 7 0 6 32;
width: 163;
text-decoration: none;
display: block;
}
#nav-headerType1
{
color: #0F2B5B;
background: url(/_test/images/nav-header.gif) no-repeat 0px 0px;
}
#nav-headerType2
{
color: #0F2B5B;
background: url(/_test/images/nav-header.gif) no-repeat 0px -30px;
}
#nav-headerType3
{
color: #FF0000;
background: url(/_test/images/nav-header.gif) no-repeat 0px -60px;
}
#nav-headerType4
{
color: #0F2B5B;
background: url(/_test/images/nav-header.gif) no-repeat 0px -90px;
}
#nav-headerType5
{
color: #FF0000;
background: url(/_test/images/nav-header.gif) no-repeat 0px -120px;
}
Hello Everyone @ Devshed, I'm trying to improve my limited CSS skills and have a few simple questions which would really help clean up my HTML. I haven't been able to find the answer in the excellent CSS resources in the sticky (if you haven't already they are worth checking out), or in past questions so here is a new post. I understand it is possible to set styles for html tags which then apply to all document elements without having to specify a class in the actual html, so a style sheet looking like, table {border: 1px solid #000000; background-color: #EEEEEE;} th {font-weight: bold;} td {font-size: 10px;} .... Applies to a table such as the one below without having to specify a class attribute in each element. <table> <th>Title</th> <td>Cell </td> </table> I have 8 small tables on a page and would like to specify each with a unique style. A example styling could be table .style1 {border: 2px solid #000000; background-color: #CCCCCC;} th .style1 {font-style: italic;} td .style1 {font-size: 12px;}, Is there anyway I can re-write the style sheet declarations so that I declare the style I want to apply to the entire table just the once? As opposed to writing class='style1' in each table element (see below). Are ID's usefull here? <table class='style1'> <th class='style1'>Title</th> <td class='style1'>Cell</td> </table> Thanks in advance for your time, Peter Hello, I am trying to make my webpage, www.jwwebdesign.info, W3 Valid. However, when I insert: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> at the top of the page, and try to vaildate, it does not like my <table height="100%"> What is a CSS alternative I can use so that I can validate my page (height: 100% won't work). Thanks, Jeff I know this may sound a stupid question. However I have been reading about XHTML and CSS for these last few weeks. From what I understand a DocType is there to determine if an XHTML document is well-formed. Therefore from my understanding the DocType should have not be related with CSS. However today I wrote the following peace of code: Code: <html>
<head>
<title>Test</title>
<style>
div > span { color: red; }
</style>
</head>
<body>
<div><p>
<span>hello</span>
</p><span>World!!</span>
</div>
</body>
</html>
On Internet Explorer 7 it did not work since 'Hello World!!' was writen all in black. However on Firefox it worked fine since 'World!!' was correctly displayed in red. Then I added the Strict DocType to the page: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> ... and it started working on Internet Explorer 7 as well! Now I am glad that it worked on Internet Explorer 7 when using the DocType (Strict). However isn't this wrong? I mean shouldn't this just work without the DocType since it is CSS related and not XHTML? I am very new to all this and I understand that I may be missin something here! However I would be very greatfull if someone could explain me if this behavior from Internet Explorer 7 is correct or not! Thanks and Regards, Sim085 I've just installed a HTML Doctype declaration after having issues making my webpage work on Firefox and IE. After installing the declaration, the colour of my top nav-bar refuses to change... it stays white, and the text, unreadable. This happens on IE and Opera, but works fine with Firefox. I've also been recieving complaints that my page is non-functioning with the font appearing "way too small". If anyone can give me any ideas, and also point out a simple explanation of the difference between the box model and the W3 layout model, I'd be grateful... Thanks for the advice people gave me last time; I at least managed to get the page working with Firefox... Link to page I just realized tonight that CSS I have been using with my XHTML 1.1 documents does NOT work with HTML 4 documents. Is this common? I never knew there was a difference in CSS functionality between doctypes. I'm having a CSS problem. Everythign i desinged worded fine until i included a <!DOCTYPE> I'm using XHTML 1.0 Strict and everything validates fine, as well as the CSS (according to w3c) Alink to the site: The "E" Proposition here is teh CSS code I am Using (the navigation links) Code: .Nav1 a:hover{color: #666666;}
.Nav1Td{border-right: 1px solid #999999;background-color: #000000;}
.Nav1{padding: 2px 0 10px 0px;font-family: MS Tahoma, Arial;}
.Nav1 .line{border-top: solid 1px #000000;margin: 5px 0 5px 0;}
.Nav1>.line{margin: 6px 0 4px 0;}
.Nav1 h4{margin: 4px 0px 5px 5px;font-size: 10pt;font-family: MS Tahoma, Arial;}
.Nav1>h4{margin: 4px 0px 4px 5px;}
.Nav1 h3{margin: 4px 0px 5px 5px;font-size: 8pt;font-family: MS Tahoma, Arial;}
.Nav1>h3{margin: 8px 0px 4px 5px;}
.Nav1 ul{list-style: none;margin: 0;padding: 0;}
.Nav1 li{margin: -4px 2px;width: 90%;}
.Nav1>ul>li{margin: -3px 2px;}
.Nav1 a{position: relative;background-image: url(images/off.gif);width: 115px;cursor: pointer;display: block;color: #000000;font-family: MS Tahoma, Arial; font-size: 9pt;padding: 2px 4px 4px 8px;margin: 1px 0px; text-align: justify;text-decoration: none;}
.Nav1>ul>li>a{border: 1px solid transparent;padding: 2px 4px 4px 8px;}
.Nav1 a:visited{color: #000000;}
.Nav1 a:hover{border: 1px solid #cccccc;margin: 0px;padding: 2px 4px 4px 8px;background-image: url(images/over.gif);text-decoration: none;}
.Nav1>ul>li>a:hover{margin: 1px 0px;}
might i have made a careless error that CSS validator is not picking up on?? If I take out the doctype tag, everything works fine. But of course, i dont want to do that...heh any help would be greatly appreciated... Is this a strict (or even valid) doctype? Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> what should I expect the UA to behave like? hi, I am trying to do DIV 100% height to match the browser height. as I read only way is to make body tag set to 100% and then whatevers is defined 100% within body will readjust at 100% height. problem i found, it doesnt work with any Doctype I set for the page, not xmlns transitional, strict, 4.01 strict , transitional, you name it. BUT as soon as I remove Doctype and start page with just <html> tage this CSS works. I ve tried to link css and embed, same results. W3C validation checks out with no errors. hers 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=iso-8859-1" />
<title>CSS</title>
<style type="text/css">
<!--
body {
margin: 0px;
padding: 0px;
background-color:#333333;
height: 100%;
}
.centerwrapper {
width: 1000px;
height: 100%;
background-color:#0099FF;
margin-left: auto;
margin-right: auto;
}
-->
</style>
</head>
<body>
<div class="centerwrapper"></div>
</body>
</html>
if someone has an idea what doctype would work or if theres another problem with this. I'm using IE7 (becuase my company demands it) and I have the following 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=iso-8859-1" /> <title></title> <body> <form> <input name='reason' type='text' size='75' value='' style='border:none;'/> </form> </body> </html> and it shows a border in my input even though there's a 'border:none;' but when I remove the Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> The border dissapears! Is there a different doctype that I'm supposed to be using here? I am trying to develope http://www.hotlinkforums.com/, but why does the doctype that is generated by the forums screwup my styles. When I take it out of my homepage it makes my stylesheet work correctly, but when I use it it doesn't. Does it matter if I don't use the doctype? Will that screw up search engine ranking or anything? Also what the heck is all of this in my homepage?: <html dir="ltr" lang="en"> <head> <meta http-equiv="Pragma" content="no-cache" /> <meta http-equiv="Expires" content="-1" /> <meta http-equiv="Cache-Control" content="no-cache" /> <title>HotLink Forums - powered by vBulletin</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <meta name="generator" content="vBulletin 3.0.0 Release Candidate 3" /> <meta name="keywords" content="vbulletin,forum,discussion,bulletin board,hotlink,hosting,linux,vb,domains,reseller,affordable,cheap" /> <meta name="description" content="Message Boards for HotLink Hosting" /> Does the direction and lagnuage statements in the html tag matter towards anythign important? What do all these weird meta tags such as pragma, expires, cache-control, generator do and do I need them there? Do the meta tags below the title need to be below the title because I know I can put them above it with the others. Also, why is there a blank white space at the top of the forums? And why does the background to my td at the bottom not work? Hello, this is an ego crasher, just when I was getting to master CSS, I hit botton with html / CSS. I wanted to add stuff on this page, but the way frontpage 2006 sees hebrew, and spanish is just wrong. This page happens to be spanish with hebrew, the letters go weird. I have work in many spanish / hebrew sites, and tried without success to see why my hebrew goes wild, then, the spanish does the same. I tried to put the doctype, and the title lowers it self? then the charset, not matter what lenguages I stipulate, including do not work <meta http-equiv="Content-Language" content="es"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> Which worked for me in other sites! Below is my link I am having hell with. If any one can share light in to the problem. PLEASE!!! (URL address blocked: See forum rules) Thanks, Karl Ok, some trouble with Fire Fox and IE. I am creating a site for Ernies Inn and for right now I am hosting it here until I am done and the owner is willing to have it. http://ernies.bombinaid.com Problems IE: The main box areas in each page keeps going over the menu! FireFox: In the menu page it seems every time the mouse goes over a h3 tag it has a mouse over effect. I am using <a name="something"> for the page jumping. Here is the css code: Code: body {background-color: black}
.header {width: 100%; margin-left: -1px; margin-top: -4px;}
.links {width: 100%; text-align: center; background-image: url('defult.gif'); background-repeat: repeat-x;}
.main {background-color: #cc3333; height: auto; width: 700px; margin-top: -34px; margin-left: 7cm;}
.main2 {background: url(corner1.gif) 0 100% no-repeat}
.main3 {background: url(corner2.gif) 100% 100% no-repeat}
h3 {color: #ffffff; font-family: Arial; font-size: 30px;}
a:link {text-decoration: underline; color: black;}
a:hover {text-decoration: underline; color: black;}
a:visited {text-decoration: underline; color: black;}
hr {color: white}
img.ajm113 {margin-left: 30cm;}
Can someone help me out here? |
|||||||