|
CSS - Nav Buttons Not Displaying Properly
Similar TutorialsHi, I'm having issues trying to get text to center on a few buttons. Here's the site: http://www.highspeeddirtcheap.com The buttons I'm having problems with are located near the top right, labeled as: Current Deal, How We Roll, and More Deals Moreover, the buttons don't even show up in IE6 or 7. Any ideas of what I'm doing wrong? Thank you. Surprise, surprise... [edit]link removed...[/edit] In FF the list of links that represent the toon archive are dispayed as two columns just like I want, but IE isn't performing properly, showing it as one list right under the other... [note] The CSS is in the head, I haven't exported to a seperate file sheet yet since it's still in development. [/note] I'm confused as to what's causing this... http://www.houndsandme.com/ It looks great in FireFox of course... but in IE6 the #column div is longer than it's supposed to be so that the background of the inner elements doesn't cover it all the way. It's almost like either the padding of the #column div, or the margin of the inner div (but only the last one) is incorrect... Also, have a look at IE7 for some really strange happenings... Make sure you scroll over the nav links Hi everyone, This is my first time posting, I'm having a issue getting my site to appear correctly in IE7. It displays properly in all other major browsers (firefox, safari, chrome, opera and even ie6) but for some reason in IE7 the header imager overlaps the menubar. The site is (vividmark.com.au) and if anyone could shead some light on this, I'd be very greatful. Thanks. The middle content column on our page, (code shown below) is not displaying in IE5 and IE6. Any ideas as to why? see page at federalacqusitionservice Code: start code --> </style> </head> <body> <!-- Generated at () --> <div id="container" > <div id="banner" > <div align="left"><img src="(URL address blocked: See forum rules)" width="400" height="63" /><img src="(URL address blocked: See forum rules)" width="60" height="63" /> <script type="text/javascript"><!-- google_ad_client = "pub-3947167825178840"; /* 468x60, created 7/17/08 */ google_ad_slot = "7082054352"; google_ad_width = 468; google_ad_height = 60; //--> </script> <script type="text/javascript" src="()"> </script></div> <h1><a href="()">Home</a> | advertise | about us | Contact US</h1> </div> <div id="outer" > <div id="inner"> <div id="left" > <h2><img src="()" /> </h2> <div align="left"> <script type="text/javascript" src="()"></script> <br /> <table width="195" border="0"> <tr> <td><div align="center"> <script type="text/javascript"><!-- google_ad_client = "pub-3947167825178840"; /* 120x90, created 7/17/08 */ google_ad_slot = "9592010100"; google_ad_width = 120; google_ad_height = 90; //--> </script> <script type="text/javascript" src="(URL address blocked: See forum rules)"> </script> </div></td> </tr> </table> <br /> <img src="()" alt="Featured Links" width="200" height="34" /><br /> <br /> <table width="195" border="0"> <tr> <td> <div align="center"> <img src="()" width="185" height="45" /><br /> <br /> <img src="()" width="185" height="45" /><br /> <br /> <img src="()" width="185" height="45" /><br /> <br /> <script type="text/javascript"><!-- google_ad_client = "pub-3947167825178840"; /* 120x240, created 7/14/08 */ google_ad_slot = "0661630514"; google_ad_width = 120; google_ad_height = 240; //--> </script> <script type="text/javascript" src="()"> </script> </div></td> </tr> </table> <br /> <br /> <br /> </p> </div> </div> <div id="right" > <h2><img src="()" /></h2> <pre class="style1"><h2><a href="()">(URL address blocked: See forum rules)</a><br />Printing, Promo Items, WebSites <a href="http)">()</a><br />Import to the US with confidence <a href="httprules)">linkstodc.com</a><br />Washington, DC business <br />and living directory.<br /><a href="(URL address blocked: See forum rules)">stickerrocket.com</a> custom sticker, stock labels <a href="(rules)">hostingone.ca</a><br />Affordable web hosting <br /> Become a sponsor to federalacqusitionservice.com click here</h2> <br /> <br /><script type="text/javascript"><!-- google_ad_client = "pub-3947167825178840"; /* 120x90, created 7/14/08 */ google_ad_slot = "4200878981"; google_ad_width = 120; google_ad_height = 90; //--> </script> <script type="text/javascript" src="(URL address blocked: See forum rules)"> </script> <br /><br /> <br /> <br /> </div> <div id="content"> <h2><img src="(rules)" width="546" height="34" /><br /> </h2> <table width="543" align="center" style="border-left: 1px solid rgb(192,192,192); border-right: 1px solid rgb(192,192,192); border-top: 0px solid rgb(192,192,192); border-bottom: 1px solid rgb(192,192,192)"> <tr> <td width="268" height="127" valign="top"><table width="234" height="42" border="0" align="center"> <tr> <td width="228" height="38" valign="top"> FederalAcquisitionService.com is the link directory for Federal, State, Local and non-profit contracting sources. </td> </tr> </table> <table width="234" border="0" align="center"> <tr> <td width="134" valign="top">Check back regularly to see an even greater number of Federal acquisition links.</td> <td width="90"><img src="(URL address blocked: See forum rules)" alt="US Link Directory" width="90" height="60" /></td> </tr> </table> </td> <td width="267" valign="top"><table width="234" height="42" border="0" align="center"> <tr> <td valign="top">Reach your clients through sponsored <a href="httpURL address blocked: See forum rules)">text links</a> and <a href="httprules)">featured links</a> on FederalAcquisitionService.com. <br /></td> </tr> </table> <table width="234" border="0" align="center"> <tr> <td width="134" valign="top">Text links start at only $9.95 per month, featured image links start at $99 per year.</td> <td width="90"><img src="(forum rules)" alt="Premium Links" width="90" height="60" /></td> </tr> </table></td> </tr> <tr> <td height="14" colspan="2" valign="top"><div align="center"><script type="text/javascript"><!-- google_ad_client = "pub-3947167825178840"; /* 468x60, created 7/17/08 */ google_ad_slot = "6799108791"; google_ad_width = 468; google_ad_height = 60; //--> </script> <script type="text/javascript" src="(URL address blocked: See forum rules)"> </script > <br /> </div></td> </tr> </table> <img src="(rules)" width="546" height="34" /> <table width="543" align="center" style="border-left: 1px solid rgb(192,192,192); border-right: 1px solid rgb(192,192,192); border-top: 0px solid rgb(192,192,192); border-bottom: 1px solid rgb(192,192,192)"> <tr> <td valign="top"><div align="right"><a href="!!tophits!!"><img src="(rules)" width="82" height="35" border="0" /></a><a href="!!whatsnew!!"><img src="(URL rules)" width="50" height="35" border="0" /></a><a href="!!rgs_login!!"><img src="(rules)" width="57" height="35" border="0" /></a><a href="!!add_url_link!!"><img src="(URL rules)" width="73" height="35" border="0" /></a><a href="!!add_premium_url_link!!"><img src="( See forum rules)" width="136" height="35" border="0" /></a><a href="!!register!!"><img src="(rules)" width="72" height="35" border="0" /></a><br /> <br /> </div> <form method="POST" action="(: See forum rules)"> <p align="center"><input type="text" name="keywords" size="33"><input type="submit" value="Search" name="B1"> <a href="(forum rules)">Advanced</a></p> </form> <div align="left">!!psdata!!<br /> <br /> </div></td> </tr> </table> <h2><br /> <br /> <br /> </h2> </div> </div> <!-- end inner --> </div><!-- end outer --> <div id="footer"><h1 align="center">C federalacquisitionservice.com 2008</h1> </div> </div><!-- end container --> </body> </html> Code: end code Hello Can anyone tell me where this code is going wrong, works fine in IE, firefox shows all the menu under one another. Here is my code - css Code:
div#menuContainer
{ width:146px;
position:absolute;
margin:0px;
background:#ffffff;
height:400px; }
ul#mainMenu{ margin:0;
padding:1px 0;
list-style:none;
width:100%;
height:21px;
border-left:1px solid #ffffff;
font-family:verdana, arial, helvetica;
font-size:12px;}
ul#mainMenu li{ margin:0;
padding:0;
display:block;
float:left;
position:relative;
width:146px; }
ul#mainMenu li a:link{ padding:4px 0; display:block; text-align:center; text-decoration:none; background-color:#333333; color:#ffffff; width:146px; height:25px; border-right:1px solid #ffffff; border-top:1px solid #ffffff;
font-family:Arial, Helvetica, sans-serif; font-size:16px;}
ul#mainMenu li a:visited{ padding:4px 0; display:block;
text-align:center;
text-decoration:none;
background-color:#999999;
border-top:1px solid #ffffff;
border-right:1px solid #ffffff;
color:#ffffff;
width:146px;
height:25px;
font-family:Arial, Helvetica, sans-serif; }
ul#mainMenu li a:hover{ padding:4px 0;
display:block;
text-align:center;
text-decoration:none;
background-color:#666666;
color:#ffffff;
width:146px;
height:25px;
border-right:1px solid #ffffff;
border-top:1px solid #ffffff;
font-family:Arial, Helvetica, sans-serif; }
ul#mainMenu li a:active{ padding:4px 0; display:block;
text-align:center;
text-decoration:none;
background-color:#999999;
color:#ffffff;
width:146px;
height:25px;
border-right:1px solid #ffffff;
border-top:1px solid #ffffff;
font-family:Arial, Helvetica, sans-serif;}
ul#mainMenu li ul.subMenu { display:none; margin:0; padding:0;
list-style:none; position:absolute;
left:147px;
top:0px;
padding:1px 1px 0 1px;
border-right:1px solid #FFFFFF;
background:#ffffff;
z-index:1000; }
ul#mainMenu li:hover ul.subMenu{ display:block; }
ul#mainMenu li ul.subMenu li{ width:146px;
clear:left;
}
ul#mainMenu li ul.subMenu li a:link { clear:left;
background-color:#000066; padding:4px 0;
width:146px;
border:none;
border-bottom:1px solid #ffffff;
position:relative;
z-index:1000;
}
ul#mainMenu li ul.subMenu li a:visited{ clear:left;
background-color:#000099;
padding:4px 0;
width:146px;
border:none;
border-bottom:1px solid #ffffff;
position:relative;
z-index:1000; }
ul#mainMenu li ul.subMenu li:hover a{ clear:left;
background-color:#000099;
padding:4px 0;
width:146px;
border:none;
border-bottom:1px solid #ffffff;
position:relative;
z-index:1000;}
ul#mainMenu li ul.subMenu li a:active{ clear:left;
background-color:#000099;
padding:4px 0;
width:146px;
border:none;
border-bottom:1px solid #ffffff;
position:relative; z-index:1000;}
ul#mainMenu li ul.subMenu li a:hover{ clear:left;
background-color:#000099;
padding:4px 0;
width:146px;
border:none; border-bottom:1px solid #ffffff;
position:relative; z-index:1000; }
ul#mainMenu li ul.subMenu li ul.subMenu1{ display:none;
margin:0; padding:0; list-style:none;
position:absolute;
left:147px;
top:-2px;
padding:1px 1px 0 1px; border-right:1px solid #FFFFFF; background:#ffffff; z-index:900; }
ul#mainMenu li ul.subMenu li:hover ul.subMenu1{ display:block; }
ul#mainMenu li ul.subMenu li ul.subMenu1 li a:link{ background-color:#000099; }
ul#mainMenu li ul.subMenu li ul.subMenu1 li a:visited{ background:#000099; }
ul#mainMenu li ul.subMenu li ul.subMenu1 li:hover a{ background:#000099; }
ul#mainMenu li ul.subMenu li ul.subMenu1 li a:hover{ background:#000099; }
ul#mainMenu li ul.subMenu li ul.subMenu1 li a:active{ background:#000099; }
ul#mainMenu li ul.subMenu li a span{ position:absolute;
top:0;
left:132px; font-size:12pt;
color:#fe676f; }
ul#mainMenu li ul.subMenu li:hover a span{ position:absolute; top:0; left:132px; font-size:12pt; color:#ffffff; }
ul#mainMenu li ul.subMenu li a:hover span{ position:absolute; top:0; left:132px;
font-size:12pt;
color:#ffffff; }
html 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>Untitled</title> <link rel="stylesheet" type="text/css" href="menu_style.css" /> </head> <body> <div id="menuContainer"> <ul id="mainMenu"> <li><a href="#" name="Home">Home</a></li> <li><a href="#" name="Services">Services</a></li> <ul class="subMenu"> <li><a href="#" name="internet marketing">Internet Marketing</a></li> <li><a href="#" name="web development">web development</a></li> <li><a href="#" name="e-commerce">e-commerce</a></li> </ul> <li><a href="#" name="About">About Us</a></li> <li><a href="#" name="case studies">Case Studies</a></li> <li><a href="#" name="Jobs">Jobs at toltech</a></li> <li><a href="#" name="Contact Us">Contact Us</a></li> <ul class="subMenu"> <li><a href="#" name="Location">Location</a></li> <li><a href="#" name="Enquiry Form">Enquiry Form</a></li> </ul> </ul> </div> </body> </html> Thanks in advance, gillian I am just muddling through tweaking my weblog at the mo - learning as I go. But I have come accross something that I just can't pinpoint the solution for. I was hoping someone here could look at it with a fresh [and more knowledgeable] perspective. I have been googling, reading, researching, experimenting and generally pulling my hair out for about 12 hours now and am still no closer. The problem is that I have a div (with the id of "left bar") which I would like to sit on the left hand side of my page. It displays perfectly in firefox but in IE the whole section sits to the extreme right. Here is the link to the SITE Here is a link to some SCREENSHOTS The code:CSS Code:
/*left bar */
#left_bar {
float: left;
position: absolute;
padding-left: 2px;
margin: 160px 12em 0px 0px;
width: 200px;
display: inline;
}
#left_bar ul {
color: #336666;
font-weight: bold;
text-transform: lowercase;
list-style-type: none;
margin: 0;
padding-left: 1px;
}
#left_bar ul li {
font: italic normal 100% 'Times New Roman', Times, serif;
text-align: right;
letter-spacing: 0.1em;
margin-top: 10%;
margin-right: 10%;
float: none;
padding-bottom: 2px;
}
#left_bar ul ul {
font-variant: normal;
font-weight: normal;
line-height: 100%;
text-align: left;
list-style-type: none;
margin: 0;
padding: 0;
}
#left_bar ul ul li {
font: normal normal 70%/115% 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
letter-spacing: 1px;
border: 0;
margin-top: 0;
padding: 0;
padding-left: 8px;
}
#left_bar ul ul li a {
color: #996699;
text-decoration: none;
}
#left_bar ul ul li a:hover {
border-bottom: 1px solid #660066;
}
The code: html Code: <div id="left_bar"> <ul> <li id="calendar"> <?php require( dirname(__FILE__).'/_calendar.php' ); ?> </li> </ul> <ul> <li> <?php require( dirname(__FILE__).'/pophis.php' ); ?> </li> </ul> <br /> <ul> <li> <ul> <li> <?php require( dirname(__FILE__).'/misc.php' ); ?> </li> </ul> </li> </ul> </div> Any thoughts, help, suggestions..... anything...... would be v much appreciated! Hello everyone; I've been working on my webpage and I just noticed that my page loaded differently ( not aligned ) in my friends wide screen Laptop. I was hoping if anyone knows of a way to display the webpage properly no matter what resolution or screen? would this be done with css or just plain HTML? please let me know. thank you. mamut I've searched around the web for a solution to this problem and have found other with BG display problems, but none that were exactly the same. Others seems to have a persistant problem, while mine only occurs about 20% of the time a page is loaded. Basically I have a div within a div. The inner div has variable content ranging from images, text, and tables, some of which are floated. The outer div has a superfish style menu in it. The height of the inner div is set to 100% to expand with the content within, and the outer div height is set to 100% to expand along with the inner div. Basically, two kinds of errors appear at random with IE. 1) a thin line of the outer div background color is missing at the bottom of the div just about corners rounded with RUZEE.ShadedBorder, or 2) a larger block of the background is missing just above the rounded corners. It only happens sporatically in IE, and usually pressing Reload fixes the problem. These divs are also enclosed within another container div, but its the smaller inner container div that is having the problem. It happens on all of the pages in my site about 20% of the time they are loaded up. Does anyone know why I'm having this problem? Any help is greatly appreciated! Here are two images of what I'm talking about followed by my CSS for those two divs. http:// i1093.photobucket.com/albums/i428/kan3xiao/Clipboard01.jpg http:// i1093.photobucket.com/albums/i428/kan3xiao/Clipboard02.jpg (remove the extra spaces after http://) #outerDiv { background-color: #BBDB56; height: 100%; padding: 1px 20px 23px 5px; width: 860px; margin: 15px auto 0px auto; } #outerDiv, #outerDiv .sb-inner { background: #bbdb56; } #innerDiv { margin: 15px 0px 0px 160px; padding-bottom: 0px; background-color: #fff; height: 100%; } Thanks for taking the time to read my question. I have 2 types of pages. One with 2 colums and one with 3. If I have only one row, it all works out fine. When I add subsequent rows, the page gets all messed up. Why? How do I make "contentleft" always be on the lefthand side? CSS Code:
body {
text-align:center;
margin-top: 0px;
background-color: #d8d8d8;
}
a:visited {
color:#c0c0c0;
}
a:hover {
color:red;
}
a {
color:white;
}
#frame {
width: 640px;
text-align: center;
}
#main {
background-color: #6699cc;
width: 640px;
}
#main p.pagetitle {
color: white;
font-size: 32;
}
#main p.title {
color: white;
font-size: 22;
text-align: left;
text-decoration: underline;
font-weight: bold
}
#sub {
background-color: #6699cc;
width: 640px;
padding-left: 20px;
padding-right: 20px;
}
#sub p.titleleft {
float: left;
color: #000073;
font-size: 15;
width: 160px;
padding: 5px;
text-decoration: underline;
}
#sub p.titlecenter {
float: left;
color: #000073;
font-size: 15;
width: 160px;
padding: 5px;
text-decoration: underline;
}
#sub p.titleright {
float: left;
color: #000073;
font-size: 15;
width: 280px;
padding: 5px;
text-decoration: underline;
}
#sub p.contentleft {
float: left;
color: #000073;
font-size: 15;
width: 160px;
padding: 5px;
}
#sub p.contentcenter {
float: left;
color: #000073;
font-size: 15;
width: 160px;
padding: 5px;
}
#sub p.contentright {
float: left;
color: #000073;
font-size: 15;
width: 280px;
padding: 5px;
}
#sub p.titlerightright {
float: left;
color: #000073;
font-size: 15;
width: 299px;
padding: 5px;
text-decoration: underline;
}
#sub p.titleleftleft {
float: left;
color: #000073;
font-size: 15;
width: 299px;
padding: 5px;
text-decoration: underline;
}
#sub p.contentrightright {
float: left;
color: #000073;
font-size: 15;
width: 299px;
padding: 5px;
}
#sub p.contentleftleft {
float: left;
color: #000073;
font-size: 15;
width: 299px;
padding: 5px;
}
html: 3 colum example. Code: <html> <!-- Generated by AceHTML Freeware http://freeware.acehtml.com --> <!-- Creation date: 10/15/04 --> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title></title> <meta name="description" content=""> <meta name="keywords" content=""> <meta name="author" content="bradsonorus@hotmail.com"> <meta name="generator" content="AceHTML 5 Freeware"> <link rel="StyleSheet" type="text/css" href="test.css"> </head> <body> <div id="frame"> <div id="main"> <img src="C:/Lisa/images/topbar.png" width="640" height="30" alt=""> <img src="C:/Lisa/images/highburyschool.jpg" width="166" height="104" alt="Highbury School, Winnipeg, Manitoba, Canada"> <span> </span> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="500" height="100" id="LisasNavBar" align="middle"> <param name="allowScriptAccess" value="sameDomain" /> <param name="movie" value="C:/Lisa/LisasNavBar.swf" /> <param name="quality" value="high" /> <param name="bgcolor" value="#6699cc" /> <embed src="C:/Lisa/LisasNavBar.swf" quality="high" bgcolor="#6699cc" width="500" height="100" name="LisasNavBar" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> </object> <p class="pagetitle">TESTS</p> <p class="title">Tests:</p> </div> <div id="sub"> <p class="titleleft">Test Topic / Subject</p> <p class="titlecenter">Test Date</p> <p class="titleright">Suggestions</p> <p class="contentleft">Math: Long Division Test</p> <p class="contentcenter">Tuesday, October 15, 2004</p> <p class="contentright">Review pages 31 to 40 in Math text.</p> <p class="contentleft">English: Spelling Test</p> <p class="contentcenter">Tuesday, October 22, 2004</p> <p class="contentright">Practice all the 17 syllable words, they will be on the test.</p> <p class="contentleft">Phys. Ed.</p> <p class="contentcenter">Tuesday, November 5, 2004</p> <p class="contentright">Full Marathon. Those that don't make it under the 5 hour limit will fail.</p> <p><hr width="80%"></p> <p><a href="C:/Lisa/home.htm">Home</a> | <a href="C:/Lisa/homework.htm">Homework</a> | <a href="C:/Lisa/projects.htm">Projects</a> | <a href="C:/Lisa/specialevents.htm">Special Events</a> | <a href="C:/Lisa/tests.htm">Tests</a> | <a href="C:/Lisa/links.htm">Links</a></p> </div> <img src="C:/Lisa/images/bottombar.png" width="640" height="30" alt=""> </div> </body> </html> Here is a quick visual layout of my page (container) (div banner) (div left column) (div middle content) (div right column) (div footer) In my (div left column) is a list that is aligned right which works great. However, lower in the (div left column) I wish to make another list and align it left. The problem is it won't align all the way to the left. It stops at about the center of the div. I didn't notice it on the first list because it aligned right just fine but it also stops in the middle. Here is the HTML: (go easy on the coding, I'm still pretty new at this stuff) Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <link rel="stylesheet" href="css/common.css" type="text/css" media="screen" /> <title>Las Vegas Floor Care</title> </head> <body id="body"> <div id="container"> <div id="banner"> </div> <div id="content"> <div id="content_left"> <div class="links"> <ul class="list"> <li><a href="index.htm"><span class="list_big">H</span>OME <span class="list_big">P</span>AGE</a></li> <li><span class="list_big">R</span>ESIDENTIAL</li> <li><span class="list_big">C</span>OMMERCIAL</li> <li><span class="list_big">C</span>ONTACT <span class="list_big">U</span>S</li> </ul> </div> <div class="special_offers">Special Internet Offers</div> <img class="image_center" src="images/coupon.jpg" /> <ul class="list_offers"> <li>Test 1</li> <li>Test 2</li> </ul> </div> <div id="content_middle"> <div id="content_middle_top"> </div> <p class="text"><img src="images/slogan.jpg" style="float:left; margin-right:2px" /> At Las Vegas Floor Care we use Prochem truck mount extractors, which have been rated number one for over 30 years. We also use the Bridgpoint brand of treatment solutions that are eco friendly, pet friendly, and are even biodegradable. We offer carpet repair, cleaning, and protection making you get more out of your carpet no matter what the situation. We also offer 3 different types of tile cleaning to fit the condition of your tile and your pocket book.</p> <br /> <p class="text">We cater to all aspects of cleaning ranging from the average home owner who wants clean floors to the executive who needs to keep their office in tip top shape, and everything in between. There is no job too big or small. We offer several service packages for home owners with yearly service contracts.</p> <div id="content_middle_bottom"> </div> </div> <div id="content_right"> <img class="image_center" src="images/contact.jpg" /> <div class="side_text">If you have questions or would like to schedule a cleaning, please contact us at <span class="contact_number">(702) 756-0148</span>.</div> </div> </div> <div id="bottom"> <img src="images/bottom_top.jpg" align="top"/> <p class="bottom_text"> Phone: (702) 756-0148 <br /> Fax: (206) 350-7320 <br /> </p> </div> </div> </body> </html> Here is the CSS: Code:
#banner {position:relative; width:700px; height:130px; clear:both; background-image:url(../images/banner.jpg)}
#body {text-align:center; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:14px; background-image:url(../images/bg.jpg); margin-top:20px; background-position:center}
#bottom {position:relative; text-align:right; width:700px; clear:both; background-color:#970000}
.bottom_text {font-family:Calibri; font-size:14px; text-align:right; margin:0px 8px 0px 4px; color:#CCCCCC}
.contact_number {font-family:Calibri; font-size:12px; color:#970000}
#container {width:700px; margin-left:auto; margin-right:auto; text-align:left}
#content {position:relative; width:700px; overflow:auto; background-image:url(../images/content_bg.jpg); background-position:center}
#content_left {float:left; width:138px; margin-right:5px; clear:left}
#content_left_bottom {width:138px; background-color:#FF3399}
#content_left_top {width:138px; background-color:#FF3399}
#content_middle {float:left; width:414px}
#content_middle_bottom {width:414px; height:100px; background-image:url(../images/middle_bottom.jpg)}
#content_middle_top {width:414px; height:30px; background-image:url(../images/middle_top.jpg)}
#content_right {float:left; width:138px; margin-left:5px; clear:right}
#content_right_bottom {width:138px; background-color:#00FF00}
#content_right_top {width:138px; background-color:#00FF00}
.image_center {margin-left:auto; margin-right:auto; text-align:center; display:block}
.links a:link {text-decoration:none; color:#666666}
.links a:visited {text-decoration:none; color:#666666}
.links a:hover {text-decoration:underline; color:#970000}
.links a:active {text-decoration:none; color:#970000}
.list {font-family:Calibri; font-size:14px; list-style:none; text-align:right; margin:0px 4px 20px 4px; border-bottom:solid; border-bottom-width:1px; border-bottom-color:#666666; padding-bottom:10px; padding-right:4px; color:#666666}
.list_big {font-family:Calibri; font-size:18px}
.list_offers {font-family:Calibri; font-size:12px; list-style:none; text-align:left; margin-left:0px; overflow:auto; color:#666666}
.side_text {font-family:Calibri; font-size:12px; text-align:justify; margin:0px 4px 0px 4px; color:#666666}
.special_offers {font-family:Calibri; font-size:18px; text-align:center; margin-left:4px; color:#970000}
.text {font-family:Calibri; font-size:14px; text-align:justify; margin:0px 4px 0px 4px; color:#666666}
Thanks ahead of time for any help. hey i was just wondering how i can fix the left menu to display properly in Opera. it works in Moziila and i have a seperate style sheet for IE but Opera is no go. are there any hacks that will fix the positoning? the site is located at: http://studentwork.qantm.com.au/pking/Website/ and css is at: http://studentwork.qantm.com.au/pking/Website/ptwm.css any help would be great cheers Hi guys, Bit of an annoying problem here, Ive got this navbar up and running using image rollovers, and it works fine in IE, however if firefox and safari it displays wrong, heres my code and what happens, Thanks in advance, Scott. HTML: Code: <div class="navbar"> <ul id="navlist"> <li><a href="./shop">SHOP NOW</a></li> <li><a href="index.php">HOME</a></li> <li><a href="contact.php">CONTACT</a></li> <li><a href="faq.php">F.A.Q.</a></li> </ul> </div> CSS: Code: .navbar {
font-family:Impact;
font-size: 23px;
text-align:center;
height:54px;
}
.navbar li {
list-style:none;
display:inline;
}
.navbar a {
width:198px;
color:#FFFFFF;
background:url("rollover.gif") no-repeat;
padding:12px 10px 13px;
margin:0 0px;
}
.navbar a:hover {
background-position:0 -59px;
color:#000000;
}
.navbar a:active {
background-position:0 -118px;
color:#FFFFFF;
}
Displayed in IE: URL Displayed in FF/Safari: URL I've got a mostly-css layout he http://highballsociety.com/~lwco/test.php Using the following CSS page he http://highballsociety.com/~lwco/lwc.css For some reason, the div on the right will not display the off-white background color in IE 6. It looks fine in Firebird and even on IE 5 for Mac. I have a feeling that this has something to do with the fact that I've not done very precise sizing of various divs and haven't really implremented the IE box-model hack for much of the site. Let me know if you can help. Also, when I force IE to redraw, by moving the page off the screen and back on, or if I hover over the text in the div, it seems to try redrawing the off-white background, but never actually completes. Thanks, m__ Hi all, This is the xHTML link This is the CSS file. Please open this in Internet Explorer. Notice that when the drop-down menu falls over the drop-down list form, it gets hidden beneath the list. I've spent a whole week trying to fix this but wasn't successful This works perfectly in Firefox though. Thanks!! I have edited this page down to be bare-bones for ease... The background image only shows behind the 'branding' div. It used to show all the way down. The problem is somewhere in the style sheet because it looks the same even when I take out all content between the body tags. I am not sure what mistake I made. When you look at the style sheet you will find html#orchid to be commented out. I realized how to work with that to fix the problem, however I want to know what is causing this problem in the first place, for my further education. http://www.centerpointpilates.com/welcome2.html code: Code:
<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>CENTERPOINT PILATES :: a Santa Barbara pilates studio</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="/centerpoint.css" rel="stylesheet" type="text/css" />
</head>
<body background="/images/orchidYellowOverlay2.jpg" style="background-repeat: no-repeat; background-position: top left;">
<div id="branding">
<h1>CenterPoint Pilates - Exercising the Body and Mind</h1>
</div>
<!--end branding-->
<div id="content">
<div id="navigation">
<ul>
<li><a href="/welcome.html">WELCOME</a></li>
<li><a href="/studio.html">STUDIO</a></li>
<li><a href="/getting-started.html">GETTING STARTED</a></li>
<li><a href="/classes.html">CLASSES</a></li>
<li><a href="/schedule.html">CLASS SCHEDULE</a></li>
<li><a href="/workshops.html">WORKSHOPS</a></li>
<li><a href="/pricing.html">PRICING</a></li>
<li><a href="/instructors.html">TEACHERS</a></li>
<li><a href="/contact-us.html">CONTACT US</a></li>
</ul>
</div>
<!--end navigation-->
<div id="text">
<h2>Welcome</h2>
<p>CenterPoint Pilates was founded in 2001 with the goal of inspiring each
individual on a program of exercising the body and mind. Our certified teachers
provide exceptional guidance in private, group, and class settings. The
studio is equipped with classic and contemporary exercise apparatus and
boasts a stunning view of the Santa Ynez Mountains and downtown Santa Barbara.</p>
</div>
<!--end text-->
</div>
<!--end content-->
</body>
</html>
style sheet code: Code:
/* Normalizes margins, padding */
body, div, dl, dt, dd, ul, ol, li, pre, form, fieldset, input, blockquote, th, td {
margin: 0;
padding: 0;
}
/* Normalizes font-size for headers */
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
}
/* Removes Styles from lists */
ol, ul {
list-style: none;
}
/* Normalizes font-style and font-weight to normal */
address, caption, cite, code, dfn, em, strong, th, var {
font-style: normal;
font-weight: normal;
}
/* Removes list-style from lists */
table {
border-collapse: collapse;
border-spacing: 0;
}
/* Removes border from fieldset and img */
fieldset, img {
border: 0;
}
/* Left-aligns text in caption and th */
caption, th {
text-align: left;
}
/* Removes quotation marks form q */
q:before, q:after {
content: '';
}
/* normalizes links */
a:link {
text-decoration: none;
color: #6b9d98;
}
a:hover {
color: red;
}
a:visited {
text-decoration: none;
color: #0B6E64;
}
/*----------------------------------------------------------------*/
html {
background-color: #F6EEC2;
text-align: center;
}
body {
font-family: Arial, sans-serif, Geneva, sans-serif;
color: #6B9D98;
width: 770px;
margin: 0 auto;
margin-left: 10px;
text-align: left;
position: relative;
}
bodyBold {
font-family: Arial, sans-serif, Geneva, sans-serif;
font-weight: 700;
color: #6B9D98;
width: 770px;
margin: 0 auto;
margin-left: 10px;
text-align: left;
position: absolute;
}
/*html#orchid {
background-image: url(/images/orchidYellowOverlay2.jpg);
background-repeat: no-repeat;
background-position: top left;
}*/
#branding {
background: url(images/logo.gif) top left no-repeat;
text-indent: -9999px;
height: 70px;
margin: 0 0 30px 0;
}
div#content {
position: relative;
width: 100%;
}
div#navigation {
position: absolute;
left: 0;
width: 13%;
padding-top: 1em;
}
div#navigation li {
font-weight: bold;
font-size: .9em;
border: 1px solid #6B9D98;
width: 115px;
padding-bottom: 3px;
padding-top: 3px;
text-align: center;
margin: 0 0 20px 0;
}
div#text {
position: absolute;
left: 17%;
width: 80%;
border-left: 1px solid #6B9D98;
padding-left: 10px;
}
div#site_info{
text-align: center;
margin-top: 10px;
font-family: Arial, sans-serif, Geneva, sans-serif;
font-size: .9em;
font-style: italic;
color: #6B9D98;
padding-bottom: 3px;
}
h2 {
font-size: 1.35em;
}
indentBox {
border: 1px solid #6B9D98;
width: 115px;
padding-bottom: 3px;
padding-top: 3px;
text-align: left;
margin: 0 0 0 0;
}
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 give up. *falls over* So.. I'm dabbling in CSS. I have a general idea of how it's used and all that good stuff... I'm just having some massive issues with some of the coding. Issues that I should not be having. I'm attempting to change the color of links, visited, active, hover and otherwise. But here's where it gets strange. I get the links to change color. But... they won't all change. My code was initially more complex, but with this problem I've hacked it down to this incase there was some non working bit of text somewhere that was making something not parse properly... Code:
A:link { color:#2A2C8B; }
A:visited { color:#1D1D2D; }
A:active { color:white; }
A:hover { color:#7A7CBB; }
In this example, visited, active and hover work beautifully. Link, on the other hand, is the same old boring color as usual. So in a fit of desperation, i alter my coding as follows: Code:
A:visited { color:#1D1D2D; }
A:link { color:#2A2C8B; }
A:active { color:white; }
A:hover { color:#7A7CBB; }
now the visited link does not work, and the bottom three do. Why? why? *cry* here's the entierity of my style sheet, if anybody wants it. Code: <style type="text/css">
A:link { color:#2A2C8B; }
A:active { color:white; }
A:visited { color:#1D1D2D; }
A:hover { color:#7A7CBB; }
body {
Font-variant: Arial;
color: #111128;
font-size: small;
background: #6C5165;
background-image: url(swirlstar2.jpg);
background-repeat: repeat;
background-attachment: fixed;
margin-left: 10%; margin-right: 10%;
h1 { margin-left: -8%; }
h2,h3,h4,h5,h6 { margin-left: -4%; }
}
</style>
I am aware that there may well be an error or five in the body section... but I honestly havn't done alot of work there yet. my main concern is getting the links to work properly. And yes, I've tried snipping out the body tags and like leaving the link stuff there and it doesn't work. I've checked this in both Firefox and IE. My editor is notepad. Help? It's really appreciated... thank you. I have a website (www.fullforcecreative.com) that displays properly on I.E. and Firefox. I just recently pulled it up in Google Chrome, and it appears no style sheets are being imported. I then thought "that is strange, but Safari is based on the same thing (kinda), so I'll load it in Safari." Same issue. No style sheets. Has anyone seen anything like this before? I link to one style sheet in the header. Code:
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css; charset=utf-8" media="screen" />
This style sheet linked to from that line: Code: @charset "UTF-8"; @import url(yaml/core/base.css); @import url(css/navigation/nav_shinybuttons.css); @import url(css/screen/basemod.css); @import url(css/screen/content.css); @import url(yaml/print/print_003.css); All the other stylesheets open with the Code:
@charset "UTF-8";
@media all {
insert css here
}
The site is using YAML (http://www.yaml.de/en/) as a framework for the CSS. The only issue I could find relativly close to it was this: http://www.davidroessli.com/logs/2007/03/safari_utf8_rendering_glitch_f/ I made the change listed there (because the CSS stylesheets are in UTF-8), but it made no difference. Does anyone have any ideas? This is driving me up the wall. It does display properly in I.E. and firefox. Thanks, seth |
|||||||