-
getting FF & IE to look the same
OMG should a simply thing THANK YOU!
-
getting FF & IE to look the same
I think I've built this in IE not FF first not sure how. Can my code above be changed for FF? The IF statements affect IE but when I change the main css both IE & FF change. .title3{ background-color: #997c81; background-image: url(); background-repeat: repeat; padding-top: 2px; padding-right: 2px; padding-bottom: 2px; padding-left: 2px; font-family: arial; font-size: 10px; text-transform: uppercase; text-align: center; color: #343a44; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; } <!--[if IE 5+]> <style> .title3 {line-height:15px;} </style> <![endif]-->
-
validating site CSS & HTML errors
I sorted out the doctype but have 63 Errors, 2 warnings now http://validator.w3.org/check?verbose=1&am...iva-host.com%2F
-
getting FF & IE to look the same
I have tried the whole if IE 5+ coding etc but I must be doing it wrong. div ID title & title3 If you look here in both FF & IE you will see that the title divs (the darker heading) look almost the same and are fine. .title { background-image: url(); background-repeat: repeat; background-color: #746063; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #d3d3d3; border-right-color: #d3d3d3; border-bottom-color: #d3d3d3; border-left-color: #d3d3d3; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; font-family: arial; font-size: 10px; text-transform: uppercase; text-align: center; color: #c0c0c0; title3 div - the date is totally off when viewed in FF. .title3{ background-color: #997c81; background-image: url(); background-repeat: repeat;border-top-width: 0px; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; font-family: arial; font-size: 10px; text-transform: uppercase; text-align: center; color: #343a44; } <!--[if IE 5+]> <style> .title3 {line-height: 12px; padding: 4px;} </style> <![endif]--> The above if code is placed in the header is that correct as nothing seems to change
-
validating site CSS & HTML errors
HTML # Error Line 25, Column 8: "DOCTYPE" declaration not allowed in instance. </div><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www'>http://www ✉ # Error Line 26, Column 42: document type does not allow element "html" here. <html xmlns="http://www.w3.org/1999/xhtml"> ✉ The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements -- such as a "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed). One common cause for this error is the use of XHTML syntax in HTML documents. Due to HTML's rules of implicitly closed elements, this error can create cascading effects. For instance, using XHTML's "self-closing" tags for "meta" and "link" in the "head" section of a HTML document may cause the parser to infer the end of the "head" section and the beginning of the "body" section (where "link" and "meta" are not allowed; hence the reported error). # Error Line 51, Column 48: document type does not allow element "table" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag. <tr><td class="float"><p align="center"><table > ✉ The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element. One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>"). # Error Line 64, Column 4: end tag for "p" omitted, but OMITTAG NO was specified. </td></tr> ✉ You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">". # Info Line 51, Column 22: start tag was here. <tr><td class="float"><p align="center"><table > # Error Line 72, Column 127: required attribute "alt" not specified. … height="75" hspace="2" align="left"/>What Do You Want From Me<br /> ✉ The attribute given above is required for an element that you've used, but you have omitted it. For instance, in most HTML and XHTML document types the "type" attribute is required on the "script" element and the "alt" attribute is required for the "img" element. Typical values for type are type="text/css" for <style> and type="text/javascript" for <script>. # Error Line 87, Column 83: end tag for element "a" which is not open. …th="92" height="128" border="0" /></a></p></td> ✉ The Validator found an end tag for the above element, but that element is not currently open. This is often caused by a leftover end tag from an element that was removed during editing, or by an implicitly closed element (if you have an error related to an element being used where it is not allowed, this is almost certainly the case). In the latter case this error will disappear as soon as you fix the original problem. If this error occurred in a script section of your document, you should probably read this FAQ entry. # Error Line 100, Column 7: end tag for element "table" which is not open. </table> ✉ The Validator found an end tag for the above element, but that element is not currently open. This is often caused by a leftover end tag from an element that was removed during editing, or by an implicitly closed element (if you have an error related to an element being used where it is not allowed, this is almost certainly the case). In the latter case this error will disappear as soon as you fix the original problem. If this error occurred in a script section of your document, you should probably read this FAQ entry. # Error Line 109, Column 6: end tag for "div" omitted, but OMITTAG NO was specified. </body> ✉ You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">". # Info Line 15, Column 0: start tag was here. <div class="wrapper"> <div id="header"><img src="images/orfehsource1.png" width= # Error Line 25, Column 7: XML Parsing Error: StartTag: invalid element name. </div><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ✉ # Error Line 64, Column 5: XML Parsing Error: Opening and ending tag mismatch: p line 51 and td. </td></tr> ✉ # Error Line 64, Column 10: XML Parsing Error: Opening and ending tag mismatch: td line 51 and tr. </td></tr> ✉ # Error Line 65, Column 8: XML Parsing Error: Opening and ending tag mismatch: tr line 51 and table. </table> ✉ # Error Line 87, Column > 80: XML Parsing Error: Opening and ending tag mismatch: p line 86 and a. …width="92" height="128" border="0" /></a></p></td>… ✉ # Error Line 87, Column > 80: XML Parsing Error: Opening and ending tag mismatch: td line 86 and p. …width="92" height="128" border="0" /></a></p></td>… ✉ # Error Line 87, Column > 80: XML Parsing Error: Opening and ending tag mismatch: tr line 85 and td. …width="92" height="128" border="0" /></a></p></td>… ✉ # Error Line 89, Column 7: XML Parsing Error: Opening and ending tag mismatch: table line 84 and tr. </tr> ✉ # Error Line 96, Column 8: XML Parsing Error: Opening and ending tag mismatch: td line 84 and table. </table> ✉ # Error Line 97, Column 5: XML Parsing Error: Opening and ending tag mismatch: tr line 84 and td. </td> ✉ # Error Line 98, Column 5: XML Parsing Error: Opening and ending tag mismatch: table line 80 and tr. </tr> ✉ # Error Line 100, Column 8: XML Parsing Error: Opening and ending tag mismatch: div line 46 and table. </table> ✉ # Error Line 101, Column 6: XML Parsing Error: Opening and ending tag mismatch: body line 45 and div. </div> ✉ # Error Line 103, Column 7: XML Parsing Error: Opening and ending tag mismatch: html line 26 and body. </body> ✉ # Error Line 104, Column 7: XML Parsing Error: Opening and ending tag mismatch: div line 21 and html. </html> CSS URI : http://www.orfeh.diva-host.com/css/style.css 54 Parse error - Unrecognized } 91 .content Parse Error (line 60) { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #d4c7c1; padding-right: 5px; padding-left: 5px; font-size: 10px; padding-bottom: 5px; color: #ce673a; line-height: 13px; padding-top: 5px; font-family: Arial; background-color: #d8cdc7; text-align: justify; } 328 a:hover Parse Error #sidebar { width:426px; height:492px; float:right; background-color: #D9CFDE; } 330 text-decoration Parse Error text-decoration: underline; 332 color Parse Error color: #6772a7; 334 font-weight Parse Error font-weight: normal; 336 font-weight Parse error - Unrecognized } The news section with is part of contentmain and an include seems to be at the top of the source page so I get the doctype info twice.
-
wrapper with includes
I use includes so I don't have to edit every page each time I change amything that is on all pages
-
wrapper with includes
I'm getting there with IE apart from menu my style sheet is: @charset "utf-8"; /* CSS Document */ body { background-color: #000000; text-align:center; } #contentmain { margin: 0 auto; width: 929px; height: 1000px; text-align:left; background-color: #DED6E2; border:solid #FFFFFF thin; } #apDiv7 { width:471px; height:495px; overflow: auto; float:right; background-color: #D9CFDE; } #apDiv8 { position:absolute; left:25px; top:545px; width:906px; height:144px; } #apDiv9 { position:absolute; left:76px; top:618px; width:780px; height:4px; background-color: #000000; } #apDiv10 { position:absolute; left:248px; top:539px; width:180px; height:232px; background-color: #DED6E2; } #header { width:929px; height:140px; border-left: solid #FFFFFF thin; border-right: solid #FFFFFF thin; border-top:solid #FFFFFF thin; margin: 0 auto; } #apDiv12 { position:absolute; left:41px; top:539px; width:180px; height:232px; background-color: #DED6E2; } #apDiv13 { position:absolute; left:74px; top:288px; width:322px; height:118px; } #apDiv14 { position:absolute; left:28px; top:428px; width:423px; height:90px; background-color: #CBB3FF; } #apDiv2 { width:100%; height:18px; background-color: #EFEFEF; } #apDiv3 { width:929px; height:36px; margin: 0 auto; background-color: #BDAEC6; border:solid #FFFFFF thin; } body { background-color: #000000; } } #footer { width:100%; height: 10px; top:1000px; background-color: #EFEFEF; } .content (line 60) { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #d4c7c1; padding-right: 5px; padding-left: 5px; font-size: 10px; padding-bottom: 5px; color: #ce673a; line-height: 13px; padding-top: 5px; font-family: Arial; background-color: #d8cdc7; text-align: justify; } #apDiv6E { float:left; width:412px; height:492px; background-color: #D9CFDE; } .title3{ background-color: #997c81; background-image: url(); line-height:0.5; background-repeat: repeat;border-top-width: 0px; font-family: arial; font-size: 10px; text-transform: uppercase; text-align: center; color: #343a44; } .title { background-image: url(); background-repeat: repeat; background-color: #746063; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #d3d3d3; border-right-color: #d3d3d3; border-bottom-color: #d3d3d3; border-left-color: #d3d3d3; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; font-family: arial; font-size: 10px; text-transform: uppercase; text-align: center; color: #c0c0c0; } .content { padding-top: 4px; padding-right: 4px; padding-bottom: 4px; padding-left: 4px; background-color: #fcfcfc; font-family: Tahoma; font-size: 9px; color: #acacac; line-height: 11px; letter-spacing: 0px; text-align:left; } .content1 img{ float: left; margin: 5px 5px 5px 5px; border: 1px solid #666; background-color: #fcfcfc; font-family: Tahoma; font-size: 9px; color: #acacac; line-height: 11px; letter-spacing: 0px; } .float { font-family: Tahoma; font-size: 9px; color: #acacac; line-height: 11px; letter-spacing: 0px; border-style: solid; border-width:1px; border-color: #dadada; padding:6px; margin: 2px; background-color:#ffffff; } .comments { padding-top: 4px; padding-right: 4px; padding-bottom: 4px; padding-left: 4px; background-color: #fcfcfc; font-family: Tahoma; font-size: 9px; color: #acacac; line-height: 11px; letter-spacing: 0px; text-align:right; } .image { border-style: solid; border-width:1px; border-color: #dadada; padding:6px; margin: 2px; background-color:#ffffff; } .imageborder { margin-top: 30px; margin-bottom: 30px; background-color:#ffffff; } a img { border-style: solid; border-width:1px; border-color: #dadada; padding:6px; margin: 2px; background-color:#ffffff; } .img { border-style: solid; border-width:1px; border-color: #dadada; padding:6px; margin: 2px; background-color:#ffffff; } .content image { border-style: solid; border-width:1px; border-color: #dadada; padding:6px; margin: 2px; background-color:#ffffff; } .content imageborder { margin-top: 30px; margin-bottom: 30px; background-color:#ffffff; } .content img { border-style: solid; border-width:1px; border-color: #dadada; padding:6px; margin: 2px; background-color:#ffffff; } a:link { text-decoration: none; color: #8ca8bc; font-weight: normal; } a:hover { #sidebar { width:426px; height:492px; float:right; background-color: #D9CFDE; } text-decoration: underline; color: #6772a7; font-weight: normal; } .wrapper { margin: 0 auto; width: 950px; text-align:left; } .clear { clear: both; } why is it looking wrong in FF? do I need to add 'top' to the contentmain css?
-
wrapper with includes
are my sidebar and main content outside my main area (apDiv4 ) as they are sitting underneath but appear to be in the wrapper. I have attached all page EDIT: I have the main content inside the apDiv4 div but how do I place the sidebar div there as it's an include <div id="apDiv4"> <div id="apDiv7"> <div align="center" class="style1"> <?php include 'news/news.php'; ?> </div> </div> </div> why is apDiv7 positioned behind apDiv4 and higher than it should be? index.php footer.php header.php sidebar.php style.css menu.css
-
divs not moving down
i'll have a go at getting it into divs EDIT: slowly getting there. 1. The whole thing isn't centered yet and I've placed menu as a table inside a div. 2. Header has been sliced but haven't worked out how to get it out of a table 3. Content is below sidebar not besides it, think it's just wrong coding. header.php <!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 href="style.css" rel="stylesheet" type="text/css" /> <style type="text/css"> </head> <body> <div id="wrapper"> <table width="728" cellpadding="0" cellspacing="0"> <tr><td colspan="15" height="2"></td></tr> <tr> <td class="menu"><a href="index.php">updates</a></td> <td width="2"></td> <td class="menu"><a href="/info/">Information</a></td> <td width="2"></td> <td class="menu"><a href="/career/">career</a></td> <td width="2"></td> <td class="menu"><a href="/site/">website</a></td> <td width="2"></td> <td class="menu"><a href="/photos/">Photo Gallery</a></td> <td width="2"></td> <td class="menu"><a href="/videos/">Videos</a></td> <td width="2"></td> <td class="menu"><a href="/forum/">forum</a></td> </table> <div id="wrapperheader"> <table border="0" cellspacing="0" cellpadding="0" width="751" height="257"> <tr align="left" valign="top"> <td rowspan="1" colspan="1" height="1" width="1"></td> <td rowspan="1" colspan="1" height="1" width="199"></td> <td rowspan="1" colspan="1" height="1" width="210"></td> <td rowspan="1" colspan="1" height="1" width="169"></td> <td rowspan="1" colspan="1" height="1" width="172"></td> </tr> <tr align="left" valign="top"> <td rowspan="1" colspan="1" width="1" height="140"></td> <td rowspan="3" colspan="1" width="199" height="256"><img border="0" width="199" height="256" src="TEST/images/YOURHEADERR1C1.jpg" alt=""></td> <td rowspan="1" colspan="1" width="210" height="140"><img border="0" width="210" height="140" src="TEST/images/YOURHEADERR1C2.jpg" alt=""></td> <td rowspan="2" colspan="1" width="169" height="218"><img border="0" width="169" height="218" src="TEST/images/YOURHEADERR1C3.jpg" alt=""></td> <td rowspan="2" colspan="1" width="172" height="218"><img border="0" width="172" height="218" src="TEST/images/YOURHEADERR1C4.jpg" alt=""></td> </tr> <tr align="left" valign="top"> <td rowspan="1" colspan="1" width="1" height="78"></td> <td rowspan="2" colspan="1" width="210" height="116"><img border="0" width="210" height="116" src="TEST/images/YOURHEADERR2C2.jpg" alt=""></td> </tr> <tr align="left" valign="top"> <td rowspan="1" colspan="1" width="1" height="38"></td> <td rowspan="1" colspan="2" width="341" height="38"><img border="0" width="341" height="38" src="TEST/images/YOURHEADERR3C3.jpg" alt=""></td> </tr> </table> </div> <!-- sidebar --> <div class="sidebar"> <div class="side-title">latest gallery additions</div> <div class="side-content"> <p>More at our <A href="/gallery">gallery</A></p> <p> </p> </div> <div class="side-title">Projects</div> <div class="side-content">Latest Projects</div> <div class="side-title">media alerts</div> <div class="side-content">Latest Images Added</div></div> <!-- content --> <div id="content"><div class="table-content"></div></div> <!-- END HEADER.PHP --> </div> </body> </html> style BODY { FONT-WEIGHT: normal; FONT-SIZE: 11px; BACKGROUND-IMAGE: none; MARGIN: 0px; COLOR: #000000; BACKGROUND-REPEAT: repeat-x; FONT-STYLE: normal; FONT-FAMILY: Trebuchet MS; LETTER-SPACING: normal; BACKGROUND-COLOR: #f7f7f7 } TD { FONT-WEIGHT: normal; FONT-SIZE: 11px; COLOR: #000000; FONT-STYLE: normal; FONT-FAMILY: Trebuchet MS; LETTER-SPACING: normal } TR { FONT-WEIGHT: normal; FONT-SIZE: 11px; COLOR: #000000; FONT-STYLE: normal; FONT-FAMILY: Trebuchet MS; LETTER-SPACING: normal } .menu { PADDING-RIGHT: 6px; PADDING-LEFT: 6px; FONT-SIZE: 11px; PADDING-BOTTOM: 6px; TEXT-TRANSFORM: uppercase; COLOR: #000000; LINE-HEIGHT: 13px; PADDING-TOP: 6px; FONT-FAMILY: Trebuchet MS; BACKGROUND-COLOR: #f7f7f7 } TD.menu { PADDING-RIGHT: 8px; MARGIN-TOP: 0px; PADDING-LEFT: 8px; FONT-SIZE: 11px; MARGIN-BOTTOM: 0px; PADDING-BOTTOM: 8px; VERTICAL-ALIGN: top; TEXT-TRANSFORM: none; CURSOR: default; COLOR: silver; LINE-HEIGHT: 13px; PADDING-TOP: 8px; FONT-FAMILY: Trebuchet MS; BACKGROUND-COLOR: #f7f7f7; TEXT-ALIGN: center; TEXT-DECORATION: none } TD.menu:hover { PADDING-RIGHT: 8px; MARGIN-TOP: 0px; PADDING-LEFT: 8px; FONT-SIZE: 11px; MARGIN-BOTTOM: 0px; PADDING-BOTTOM: 8px; VERTICAL-ALIGN: top; TEXT-TRANSFORM: none; CURSOR: default; COLOR: #8c1626; LINE-HEIGHT: 13px; PADDING-TOP: 8px; FONT-FAMILY: Trebuchet MS; BACKGROUND-COLOR: #f7f7f7; TEXT-ALIGN: center } .menu A:link { FONT-WEIGHT: bold; TEXT-TRANSFORM: uppercase; COLOR: #8c1626; TEXT-DECORATION: none } .menu A:visited { FONT-WEIGHT: bold; TEXT-TRANSFORM: uppercase; COLOR: #8c1626; TEXT-DECORATION: none } .menu A:active { FONT-WEIGHT: bold; TEXT-TRANSFORM: uppercase; COLOR: #8c1626; TEXT-DECORATION: none } .menu A:hover { FONT-WEIGHT: bold; TEXT-TRANSFORM: uppercase; COLOR: #8c1626; TEXT-DECORATION: none } A:link { FONT-WEIGHT: bold; COLOR: #8c1626; TEXT-DECORATION: none } A:visited { FONT-WEIGHT: bold; COLOR: #8c1626; TEXT-DECORATION: none } A:active { FONT-WEIGHT: bold; COLOR: #8c1626; TEXT-DECORATION: none } A:hover { FONT-WEIGHT: bold; COLOR: #8c1626; TEXT-DECORATION: none } INPUT { BORDER-RIGHT: #f7f7f7 1px solid; BORDER-TOP: #f7f7f7 1px solid; FONT-SIZE: 11px; BACKGROUND: #cc7883; BORDER-LEFT: #f7f7f7 1px solid; COLOR: #000000; BORDER-BOTTOM: #f7f7f7 1px solid } TEXTAREA { BORDER-RIGHT: #f7f7f7 1px solid; BORDER-TOP: #f7f7f7 1px solid; FONT-SIZE: 11px; BACKGROUND: #cc7883; BORDER-LEFT: #f7f7f7 1px solid; COLOR: #000000; BORDER-BOTTOM: #f7f7f7 1px solid } SELECT { BORDER-RIGHT: #f7f7f7 1px solid; BORDER-TOP: #f7f7f7 1px solid; FONT-SIZE: 11px; BACKGROUND: #cc7883; BORDER-LEFT: #f7f7f7 1px solid; COLOR: #000000; BORDER-BOTTOM: #f7f7f7 1px solid } BUTTON { BORDER-RIGHT: #f7f7f7 1px solid; BORDER-TOP: #f7f7f7 1px solid; FONT-SIZE: 11px; BACKGROUND: #cc7883; BORDER-LEFT: #f7f7f7 1px solid; COLOR: #000000; BORDER-BOTTOM: #f7f7f7 1px solid } INPUT:focus { BORDER-RIGHT: #f7f7f7 1px solid; BORDER-TOP: #f7f7f7 1px solid; BACKGROUND: #cc7883; BORDER-LEFT: #f7f7f7 1px solid; COLOR: #000000; BORDER-BOTTOM: #f7f7f7 1px solid } TEXTAREA:focus { BORDER-RIGHT: #f7f7f7 1px solid; BORDER-TOP: #f7f7f7 1px solid; BACKGROUND: #cc7883; BORDER-LEFT: #f7f7f7 1px solid; COLOR: #000000; BORDER-BOTTOM: #f7f7f7 1px solid } LABEL:focus { BORDER-RIGHT: #f7f7f7 1px solid; BORDER-TOP: #f7f7f7 1px solid; BACKGROUND: #cc7883; BORDER-LEFT: #f7f7f7 1px solid; COLOR: #000000; BORDER-BOTTOM: #f7f7f7 1px solid } SELECT:focus { BORDER-RIGHT: #f7f7f7 1px solid; BORDER-TOP: #f7f7f7 1px solid; BACKGROUND: #cc7883; BORDER-LEFT: #f7f7f7 1px solid; COLOR: #000000; BORDER-BOTTOM: #f7f7f7 1px solid } BUTTON:focus { BORDER-RIGHT: #f7f7f7 1px solid; BORDER-TOP: #f7f7f7 1px solid; BACKGROUND: #cc7883; BORDER-LEFT: #f7f7f7 1px solid; COLOR: #000000; BORDER-BOTTOM: #f7f7f7 1px solid } .sidebar { PADDING-RIGHT: 4px; PADDING-LEFT: 4px; PADDING-BOTTOM: 4px; PADDING-TOP: 4px; BACKGROUND-COLOR: #f7f7f7; width:300px; top:187px } .side-title { PADDING-RIGHT: 4px; PADDING-LEFT: 4px; FONT-SIZE: 11px; PADDING-BOTTOM: 4px; TEXT-TRANSFORM: uppercase; COLOR: #000000; LINE-HEIGHT: 9pt; PADDING-TOP: 4px; FONT-FAMILY: Trebuchet MS; LETTER-SPACING: 0px; BACKGROUND-COLOR: #cc7883; TEXT-ALIGN: center } .side-content { PADDING-RIGHT: 2px; PADDING-LEFT: 2px; FONT-SIZE: 11px; PADDING-BOTTOM: 14px; COLOR: #000000; LINE-HEIGHT: 9pt; PADDING-TOP: 8px; FONT-FAMILY: Trebuchet MS; LETTER-SPACING: 0px; TEXT-ALIGN: justify } .table-content { PADDING-RIGHT: 4px; PADDING-LEFT: 4px; PADDING-BOTTOM: 4px; COLOR: #000000; PADDING-TOP: 4px; BACKGROUND-COLOR: #f7f7f7; TEXT-ALIGN: justify } #content { left:309px; top:288px; width:442px; } .title { PADDING-RIGHT: 4px; PADDING-LEFT: 4px; FONT-SIZE: 11px; PADDING-BOTTOM: 4px; TEXT-TRANSFORM: uppercase; COLOR: #000000; LINE-HEIGHT: 9pt; PADDING-TOP: 4px; FONT-FAMILY: Trebuchet MS; LETTER-SPACING: 0px; BACKGROUND-COLOR: #f7f7f7; TEXT-ALIGN: center } .footer { PADDING-RIGHT: 10px; BORDER-TOP: #f7f7f7 0px solid; PADDING-LEFT: 10px; FONT-SIZE: 11px; BACKGROUND: #f7f7f7; PADDING-BOTTOM: 10px; COLOR: #000000; LINE-HEIGHT: 10px; PADDING-TOP: 10px; BORDER-BOTTOM: #f7f7f7 0px solid; FONT-FAMILY: arial; LETTER-SPACING: 0px; TEXT-ALIGN: center } .footer STRONG { COLOR: #8c1626 } B { COLOR: #8c1626 } .footer A { COLOR: #8c1626; TEXT-DECORATION: none } .footer A:link { COLOR: #8c1626; TEXT-DECORATION: none } .news-box2 A:visited { COLOR: #8c1626; TEXT-DECORATION: none } .footer A:hover { COLOR: #8c1626; TEXT-DECORATION: none } .news-box-post { PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; COLOR: #000000; LINE-HEIGHT: 15px; PADDING-TOP: 5px } .news-box2 { PADDING-RIGHT: 5px; PADDING-LEFT: 5px; BACKGROUND: #d09ea5; PADDING-BOTTOM: 5px; PADDING-TOP: 5px } .news-box2 A { FONT-WEIGHT: bold; COLOR: #8c1626; TEXT-DECORATION: none } .news-box2 A:link { FONT-WEIGHT: bold; COLOR: #8c1626; TEXT-DECORATION: none } .news-box2 A:visited { FONT-WEIGHT: bold; COLOR: #8c1626; TEXT-DECORATION: none } .news-box2 A:hover { FONT-WEIGHT: bold; COLOR: #8c1626; TEXT-DECORATION: none } .news-title { PADDING-RIGHT: 5px; PADDING-LEFT: 5px; FONT-SIZE: 11px; PADDING-BOTTOM: 5px; TEXT-TRANSFORM: uppercase; COLOR: #000000; LINE-HEIGHT: 15px; PADDING-TOP: 5px; FONT-FAMILY: Trebuchet MS; LETTER-SPACING: 0px; BACKGROUND-COLOR: #cc7883; TEXT-ALIGN: center } .news-title UL { PADDING-RIGHT: 5px; PADDING-LEFT: 5px; FONT-SIZE: 11px; PADDING-BOTTOM: 5px; TEXT-TRANSFORM: uppercase; COLOR: #000000; LINE-HEIGHT: 15px; PADDING-TOP: 5px; FONT-FAMILY: Trebuchet MS; LETTER-SPACING: 0px; BACKGROUND-COLOR: #cc7883; TEXT-ALIGN: center } .news-title UL UL { PADDING-RIGHT: 5px; PADDING-LEFT: 5px; FONT-SIZE: 11px; PADDING-BOTTOM: 5px; TEXT-TRANSFORM: uppercase; COLOR: #000000; LINE-HEIGHT: 15px; PADDING-TOP: 5px; FONT-FAMILY: Trebuchet MS; LETTER-SPACING: 0px; BACKGROUND-COLOR: #cc7883; TEXT-ALIGN: center } .news-title LI { } .news-title A { COLOR: #000000; TEXT-DECORATION: none } .news-title A:link { COLOR: #000000; TEXT-DECORATION: none } .news-title A:visited { COLOR: #000000; TEXT-DECORATION: none } .news-title A:hover { COLOR: #000000; TEXT-DECORATION: none } H2 { PADDING-RIGHT: 4px; PADDING-LEFT: 4px; FONT-SIZE: 11px; PADDING-BOTTOM: 4px; TEXT-TRANSFORM: uppercase; COLOR: #000000; LINE-HEIGHT: 9pt; PADDING-TOP: 4px; FONT-FAMILY: Trebuchet MS; LETTER-SPACING: 0px; BACKGROUND-COLOR: #f7f7f7; TEXT-ALIGN: center } H3 { FONT-WEIGHT: bold; FONT-SIZE: 13px; TEXT-TRANSFORM: uppercase; BORDER-BOTTOM: 1px solid } #wrapperheader { width:750px; height:256px; top:100px; } #YOURHEADER1 { width:194px; height:256px; top:100px; background-color:#FFFBF0 } #YOURHEADER2 { width:171px; height:224px; top:100px; left:418px; background-color:#FFFBF0 } #YOURHEADER3 { } #title { } #welcome { width:215px; height:137px; top:100px; left:200px; background-color:#FFFBF0 } #affiliates { width:218px; height:117px; top:100px; left:200px; background-color:#FFFBF0 } the style sheet is based on a table layout & I haven't removed the styles not for divs maybe thats working against me.
-
divs not moving down
I don't have Welcome Message DIV and the Affiliate DIV the gray boxes are part of the header image. I am using wordpress for all my posts & pages except gallery, forum etc. The links at the top are not correct yet.
-
divs not moving down
if you go to the site you will see the divs to the left and not positioned over the gray boxes like they should be
-
divs not moving down
thank you so much. One other thing - <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <div class="style1" id="apDiv1">Hello and welcome to <span class="style2">Megyn Price Online</span>, the most extensive fansite dedicated to the talented actress Megyn Price. She can currently be seen in <em>Rules of Engagement</em> as Audrey.<BR> </div> <div id="apDiv2"> <CENTER> <p><img src="images/DesiringJensenOrg.gif" alt="" width="35" height="25"><img src="images/DesiringJensenOrg.gif" alt="" width="35" height="25"><img src="images/DesiringJensenOrg.gif" alt="" width="35" height="25"><img src="images/DesiringJensenOrg.gif" alt="" width="35" height="25"><img src="images/DesiringJensenOrg.gif" alt="" width="35" height="25"><br> <img src="images/DesiringJensenOrg.gif" alt="" width="35" height="25"><img src="images/DesiringJensenOrg.gif" alt="" width="35" height="25"><img src="images/DesiringJensenOrg.gif" alt="" width="35" height="25"><img src="images/DesiringJensenOrg.gif" alt="" width="35" height="25"><img src="images/DesiringJensenOrg.gif" alt="" width="35" height="25"> </p> </CENTER> </div> style: #apDiv1 { position:absolute; left:203px; top:83px; width:194px; height:94px; z-index:1; } .style1 {color: #747474} .style2 {color: #AA0000} #apDiv2 { position:absolute; left:203px; top:214px; width:194px; height:69px; z-index:2; } that code currently isn't add to the external style sheet yet. body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; background-color:#acaaaa; background-repeat: repeat-x; background-image: url(images/bg.jpg); font-family:Trebuchet MS; font-size:11px; font-style:normal; font-weight:normal; letter-spacing:normal; color: silver; } TD, TR { font-family:Trebuchet MS; font-size:11px; font-style:normal; font-weight:normal; letter-spacing:normal; color: silver; } /* MENU ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +++*/ .menu { background-color: #222222; padding: 6px; font-family:Trebuchet MS; font-size:11px; text-transform:uppercase; line-height:13px; color: silver; } td.menu { background-color: #222222; padding: 8px; color:silver; cursor:default; font-family:Trebuchet MS; font-size:11px; text-transform:uppercase; line-height:13px; margin-bottom:0px; margin-top:0px; text-align:center; text-decoration:none; text-transform:none; vertical-align: top; } td.menu:hover { background-color: #b73333; padding: 8px; color: black; cursor:default; font-family:Trebuchet MS; font-size:11px; text-transform:uppercase; line-height:13px; margin-bottom:0px; margin-top:0px; text-align:center; text-decoration:none; text-transform:none; vertical-align: top; } .menu a:link{ color:white; text-transform:uppercase; text-decoration:none; font-weight:none;} .menu a:visited{ color:white; text-transform:uppercase; text-decoration:none; font-weight:none;} .menu a:active{ color:white; text-transform:uppercase; text-decoration:none; font-weight:none;} .menu a:hover{ color:white; text-transform:uppercase; text-decoration:underline; font-weight:none;} /* VARIEDADES ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +++++*/ A:link{ color:#a03008; text-decoration:none; font-weight:none;} A:visited{ color:#a03008; text-decoration:none; font-weight:none;} A:active{ color:#a03008; text-decoration:none; font-weight:none;} A:hover{ color:#76716d; text-decoration:underline; font-weight:none;} input, textarea, select, button { font-size:11px; color:#ffffff; background: #000000; border: 1px solid #76716d;} input:focus, textarea:focus, label:focus, select:focus, button:focus { color:#000000; background: #76716d; border: 1px solid #000000;} /* SIDEBAR ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ++++*/ .sidebar { background-color: #050302; padding: 4px; } .side-title { background-color: #b73333; padding: 4px; font-family:Trebuchet MS; font-size:11px; letter-spacing:0px; line-height:9pt; color: #e1e1e1; text-transform: uppercase; text-align: center;} .side-content { padding: 2px; padding-top: 8px; padding-bottom: 14px; font-family:Trebuchet MS; font-size:11px; letter-spacing:0px; line-height:9pt; color: #9d9d9c; text-align: justify;} /* CONTENT ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ++++++*/ .table-content { background-color: #838181; padding: 4px; text-align:justify; color: #050302; } .title { background-color: #050302; padding: 4px; font-family:Trebuchet MS; font-size:11px; letter-spacing:0px; line-height:9pt; color: #e1e1e1; text-transform: uppercase; text-align: center;} /* FOOTER ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ++++++*/ .footer { background: #000000; font-weight: bold; background-image: url(); font-family: arial; font-size:11px; letter-spacing:0px; line-height:10px; color: #777777; text-align:center; padding:10px; border-bottom : 0px solid #151515; border-top : 0px solid #D1E0E2; } .footer strong, b, { color: #777777; } .footer a { font-weight: bold; color: #FFFFFF; text-decoration: none;} .footer a:link, .news-box2 a:visited { font-weight: bold; color: #FFFFFF; text-decoration: none;} .footer a:hover { font-weight: bold; color: #777777; text-decoration: underline;} /* WORDPRESS CSS ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +*/ .news-box-post { padding: 5px; line-height:15px; color:#000000; } .news-box2 { background: #222222; padding-right: 5px; padding-left: 5px; padding-top: 5px; padding-bottom: 5px;} .news-box2 a { font-weight: bold; color: #76716d; text-decoration: none;} .news-box2 a:link, .news-box2 a:visited { font-weight: bold; color: #76716d; text-decoration: none;} .news-box2 a:hover { font-weight: bold; color: #a03008; text-decoration: underline;} .news-title, .news-title ul, .news-title ul ul { background-color: #000000; font-family: Trebuchet MS; font-size: 11px; line-height: 15px; letter-spacing: 0px; text-transform: uppercase; color: #ffffff; text-align: center; padding-left: 5px; padding-top: 5px; padding-right: 5px; padding-bottom: 5px;} .news-title li {} .news-title a { color: #fff; text-decoration: none;} .news-title a:link, .news-title a:visited { color: #dee3e9; text-decoration: none;} .news-title a:hover { color: #dee3e9; text-decoration: underline;} h2 { background-color: #050302; padding: 4px; font-family:Trebuchet MS; font-size:11px; letter-spacing:0px; line-height:9pt; color: #e1e1e1; text-transform: uppercase; text-align: center; } h3{ font-size: 13px; font-weight: bold; border-bottom: 1px solid; text-transform: uppercase; } I'm wondering why this is the case. Is it another position:absolute; problem? removing them just places them at the top of the page. This is what it's like with position:absolute;
-
divs not moving down
when I remove absolute positioning the divs just line up under each other with the sidebar the width of the wrapper. Absolute positioning for the content * header places them where it should be. What is a 'css-p element'? in properties (i'm using dreamweaver) both content & header are these while wrapper & sidebar come up as 'div id' site not online yet
-
divs not moving down
I'm working on a site and currently have the coding as: <style type="text/css"> <!-- #wrapper { position:absolute; left:20px; [b]top:10px;[/b] width:900px; height:680px; } #header { position:absolute; width: 900px; top: 10px; width: 200px; } #sidebar { bgColor=#fcfcfc position:absolute; width: 300px; left: 22px; [b]top: 200px;[/b] } #content { position:absolute; width: 590px; left: 310px; top: 200px; } --> </style> </HEAD> <div id="wrapper"> <div id="header"> test</div> <div id="content">test</div> <div id="sidebar">test</div> </div> the bold items are the problem. the sidebar just stayed in the top left courner of the wrapper div and neither will move down the page. They seem to be one element - content, header & wrapper have solid borders while sidebar has a dashed border. I can't see anything to change in the above code, please help
-
cross browser problem
so I have it sorted now I think (now centered yet & design I'm working on that). One thing is the news section I have coded it: <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr><td class="title"> {subject} </td></tr> <tr><td class="title3"><p align="center">{date}</td></tr> </table> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr><td class="content"><p align="justify>{cat_icon} {news} {fullstory}</p><tr></td> <tr> <td class="comments"> <p align=right>{send} :: {comments} {nrc}</p> </td> </tr> </table> css is .title { color:#333333; font-size: 9pt; letter-spacing:0px; font-family: Arial, Helvetica, sans-serif; font-weight:bold; text-align:center; padding-left:10px; padding-top: 2px; padding-bottom: 2px; padding-bottom: 1px; } .title3 { background-color: #EFD8A5; font-family: Tahoma; font-size: 9px; line-height: 10px; font-weight: normal; color: #834054; text-align: justify; padding-left: 1px; padding-right: 1px; padding-top: 1px; padding-bottom: 1px; } .content { color:#333333; font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 10px; line-height:12px; font-weight:normal; text-align: justify; padding-left: 2px; padding-right: 1px; padding-top: 2px; padding-bottom: 2px; } .comments { font-family: Tahoma; font-size: 9px; line-height: 10px; font-weight: normal; color: #333333; text-align: justify; padding-left: 1px; padding-right: 1px; padding-top: 1px; padding-bottom: 1px; everything looks fine in IE but in FF the style for height is wrong. What can I add to make it look the same in all browsers? EDIT: I've change line-height: 10px; in style.css to 0px and added <!--[if IE 5+]> <style> .title3 {line-height: 15px;} </style> <![endif]--> it make FF smaller but still not the same as IE