|
CSS - Horiz. List Shows As Vertical In Ie7
I have a CSS tabbed menu that shows horizontal in FF and Google Chrome (not sure about others at this point), but in IE7, it shows as vertical.
I've checked the CSS & HTML in the W3C validators and come back with no errors, so I'm not sure why I'm having this problem. Any suggestions you could offer would be appreciated. CSS: Code: body {
background-color: #5D5D5D;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
}
/* Layout Specs */
#container {
width: 950px;
margin: 0 auto;
text-align: left;
}
h1, h2, h3, p {
margin: 10px 255px 10px 15px;
}
div.logo {
text-align: left;
}
div.content {
position: absolute;
background-color: #FFFFFF;
color: #504E52;
width: 950px;
margin: 0px 255px 0px 0px;
z-index: 1;
}
div.header {
background-image: url('images/header.png');
background-position: top;
background-repeat: no-repeat;
margin: 0px 0px 0px 0px;
padding: 0px;
width: 950px;
height: 200px;
z-index: 2;
clear: both;
}
div.rtcol {
position: relative;
float: right;
width: 235px;
background-color: #E7EEF9;
color: #504E52;
border-left: 1px solid #7BD5EA;
z-index: 2;
}
p.rtcol {
margin: 0px;
padding: 0px;
}
/* Tab Menu */
ol#menu {
height: 2em;
list-style: none;
float: right;
margin: 0;
padding: 0;
}
ol#menu li {
margin: 0px 0px 0px 3px;
float: left;
text-align: center;
}
ol#menu a {
background: url('images/tab.png');
color: #504E52;
display: block;
float: right;
height: 2em;
line-height: 2em;
padding-left: 10px;
text-decoration: none;
font-weight: bold;
}
ol#menu a:hover {
background-position: 0 -80px;
}
ol#menu a:hover span {
background-position: 100% -80px;
}
ol#menu li.current {
background-color: #68B2C3;
background-position: 0 -80px;
}
ol#menu li.current a {
background-position: 0 -40px;
color: #FFFFFF;
font-weight: bold;
}
ol#menu li.current span {
background-position: 100% -40px;
}
ol#menu span {
background: url('images/tab.png') 100% 0;
display: block;
line-height: 2em;
padding-right: 10px;
}
/* Text: Headings, etc. */
h1, h2, h3 {
text-transform: uppercase;
color: #6083BB;
}
h1 {
font-size: 1.5em;
}
h2 {
font-size: 1.25em;
}
h3 {
font-size: 1em;
}
h1.rtcol, h2.rtcol, h3.rtcol {
color: #E36A07;
}
And the HTML: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="container"> <div class="logo"><img src="images/logopng.png" alt="P.C. Quick"></div> <ol id="menu"> <li class="current"><a href="index.html"><span>Home</span></a></li> <li><a href="services.html"><span>Services</span></a></li> <li><a href="contact.html"><span>Contact</span></a></li> </ol> <div class="header"> </div> <div class="content"> <h2>Test Title</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec condimentum mattis nisi id convallis. Nullam aliquam pellentesque lectus, eu hendrerit lectus dapibus et. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Aliquam scelerisque, metus in euismod lacinia, augue tellus tempus urna, lacinia vulputate lectus quam nec ipsum. Integer iaculis nulla eu turpis fermentum quis dapibus enim consectetur.</p> <p>Nunc pulvinar cursus dolor id ornare. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum aliquet ornare lacinia. Integer sed ante leo, eu dictum enim. Ut risus purus, convallis eu rhoncus at, ultricies ut diam. Ut vel mi ut nibh tincidunt pretium sit amet quis urna. Donec sed auctor eros. Vestibulum nec odio ante.</p> </div> <div class="rtcol"> <h3 class="rtcol">Computer Training Courses</h3> <p class="rtcol">Tired of condescending looks from your kids?<br>Call us for more info! </div> </div> </body> </html> Similar TutorialsOn my website, my menu shows dots on FireFox, but none in Chrome and ie, I would want to remove the dots , is there any way i can do that? www.willietsang.co.cc Thanks in advance.! I'm trying to use a CSS horizontal menu. I created the menu nav in photoshop that uses a gradient background the spans horizontally across the screen, special images for bullets and special images for menu link dividers. I'm using a div for the nav and using a slice of the gradient for the background which is fine. For the bullets and using the sliced image for the bullets which is fine. My problem is the text. I want to use a special font that is in my photoshop (its like Arial but the letters are fatter). Its not a web save font. Should I make the nav into images so my text is what I want it? I have heard something about dynamic fonts but I think thats too complicated for me. Is it so bad to use menu images with proper alt tags for the main navigation? Or should I just find a default windows font and hope the user has it? Also can I use ANY windows default fonts? Suggestions? Thanks Matt Okay, I have an unordered list of images (im usings lists for ajax reasons). I have formatted the list to look much like a 4x4 table. Each cell has an image in it. I need to make the images vertical-align middle. at the moment the code i have is this: Code: <ul style="margin:0;padding:0;list-style-type:none;"> <li style="text-align: center; width: 140px; background-color: #e7e7e7; height: 150px;float: left;"><div style="height: 150px;"><a href="#"><img src="image.gif" style="vertical-align: middle;" ></a></div></li> <li style="text-align: center; width: 140px; background-color: #e7e7e7; height: 150px;float: left;"><div style="height: 150px;"><a href="#"><img src="image.gif" style="vertical-align: middle;" ></a></div></li> <li style="text-align: center; width: 140px; background-color: #e7e7e7; height: 150px;float: left;"><div style="height: 150px;"><a href="#"><img src="image.gif" style="vertical-align: middle;" ></a></div></li> <li style="text-align: center; width: 140px; background-color: #e7e7e7; height: 150px;float: left;"><div style="height: 150px;"><a href="#"><img src="image.gif" style="vertical-align: middle;" ></a></div></li> </ul> I added the div in hopes that this would help the vertical align, however it still aligns at top. Any ideas? I MUST use the list. Thanks for any help! I have a list, Each item has a graphic as a background image, so each li is 60px high Some of the text is long and wraps Some of the text remains on one line This means the the spacing is not consistent and looks a little odd I've tried Code: ul#myListId li {
vertical-align:middle;
}
and Code: ul#myListId li * {
vertical-align:middle;
}
This has no effect in any of the browsers Hi, Below is part of my code. Sorry could not upload everything otherwise code would look cumbersome, also could not load images but each image is 234 X 110. What I have is a left column. I firstly want to place a list and then three divs, each div containing an image (with text), that is also a link. I assumed with normal flow the list would appear first and then the divs, one after another. For some reason the divs go to the top of the column and are hidden by the list. I want a normal flow so that the list appears first and then the divs. Any suggestions? I would be grateful for all help. Code: <!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" xml:lang="en" lang="en">
<head>
<title>Test Page</title>
<style type="text/css">
h1, h2, h3, h4, h5, h6, p{
margin:0;
padding:0
}
img { border:none }
a{color:#000;text-decoration:none}
a:hover { text-decoration: underline; }
body {
color:#000;
font-family:Verdana, Geneva, sans-serif;
}
#wrap {
min-width: 71.08em;
margin:auto;
overflow:hidden;
}
#left
{ width: 17.38em;
padding: 0;
border: 0.125em solid #FF0000;
}
#left.column
{ text-align: justify;
}
#left ul
{ margin: 0;
padding: 0;
}
#left ul li
{ list-style-type: none;
}
#left ul li a, #left ul li a.first_in_list
{ float: left;
display: block;
width: 16em;
margin-left: 0.4em;
padding: 0.28em 0 0.28em 0.25em;
background-color: #FFD700;
border-top: 1px dotted #FFFFFF;
font-family: arial, verdana, sans-serif;
font-size: 1em;
font-weight: normal;
color: #000000;
}
#left ul li a:hover
{ text-decoration: none;
}
#left ul li a:hover span
{ text-decoration: underline;
}
#left ul li a.first_in_list
{ width: 16em;
font-size: 1em;
font-weight: bold;
margin-top: 1.8em;
padding: 0.8em 0 0.8em 0.25em;
border-top: none;
}
#leftVLink, #leftSLink, #leftGLink
{ text-align: right;
border: none;
margin: 0.3em 0 0 1em;
}
#leftVLink a:link,#leftSLink a:link,#leftGLink a:link
{ color: #333;
width: 15em;
height: 7em;
display: block;
font-size: 0.95em;
font-family: Verdana;
}
#leftVLink a:hover,#leftSLink a:hover,#leftGLink a:hover
{ color: #000;
text-decoration: underline;
}
#leftVLink
{ min-width: 14em;
background: #fff url(leftVLink1.gif) no-repeat left top;
margin: 1.5em 0 0 1em;
padding: 0.6em 0.5em 0 0;
}
#leftSLink
{ background: #fff url(leftSLink1.gif) no-repeat left top;
padding: 0.6em 0.5em 0 0;
}
#leftGLink
{ background: #fff url(leftGLink1.gif) no-repeat left top;
padding: 1.4em 0.5em 0 0;
}
</style>
</head>
<body>
<div id="wrap">
<div id="left" class="column">
<ul>
<li><a class="first_in_list" href="#">
Shopping Directory</a></li>
<li><a href="#">► <span>Latest</span></a></li>
<li><a href="#">► <span>Phone Finder</span></a></li>
<li><a href="#">► <span>iPhone finder</span></a></li>
<li><a href="#">► <span>Deal Finder</span></a></li>
<li><a href="#">► <span>Phones + FREE gifts</span></a></li>
<li><a href="#">► <span>Shop by brand</span></a></li>
<li><a href="#">► <span>Sim free phones</span></a></li>
<li><a href="#">► <span>Coming soon</span></a></li>
<li><a href="#">► <span>New and exclusive</span></a></li>
<li><a href="#">► <span>Trade in</span></a></li>
<li><a href="#">► <span>Compare phones</span></a></li>
<li><a href="#">► <span>Mobile services</span></a></li>
</ul>
<div id="leftVLink"><a href="#" title="voucher codes and offers">Voucher codes<br />and offers</a></div>
<div id="leftGLink"><a href="#" title="gift ideas: be inspired by our gift ideas">Be inspired by<br />our gift ideas</a></div>
<div id="leftSLink"><a href="#" title="safe shopping: advice for safe shopping">Advice for<br />safe shopping</a></div>
</div>
</div>
</body>
</html>
This is sort of an addendum to my earlier post on CSS, but with a new problem, now the problem is with IE. I am trying to get the SuckerFish drop downs to work and have been successful in Firefox, but IE is giving me problems. The best thing to do is look at it in action: http://www.forma3.com/stuff/css/index-v1.2.html http://www.forma3.com/stuff/css/css/index-v1.2.css I am guessing it is related to the parent child relationship in IE, namely the drop down is adopting the style (float: left) that is set for the horizontal menu. I had to put in an underscore for the "#nav li" since it was causing problems in Mozilla. Unfortunately, this causes a validation error. Hi, Does anyone know how to veritcally align text using CSS? like <tr valign='middle'> when using tables. My page is on: http://www.3003online.com/demos/ecoceylon/v2/ You can see a difference in the "Home - About Us - Products - Contact Us" links when viewing from IE and Mozilla Firefox. Basically, I would like the text to be centered vertically in the bar... but CSS by default puts it on top. I tried adding padding,which helped in IE... but Firefox still shows the links a bit higher than they should be.,... any ideas how to fix this? Also, a different problem in case anyone knows how to fix it... you can see a small brown bar on the top bar. It is 50px in height. But I have no idea how to make its width as wide as the remainder of the page (this would change with different resolutions). The main content of the page is 760px wide. I would like a brown box next to that, which is 50px in height and the remainder width. Any ideas? "width: auto;" doesn't work unfortunately [ this is a follow up to my previous thread http://forums.devshed.com/showthread.php?t=270438 Any help would be greatly appreciated. Thanks very much. Hi, Here is the page I am having trouble with: http://mccalebconstruction.anchorwave.com/slices/index2.php If you view source, the CSS should be in the file as well. It is very basic because I have stripped out everything else on the page to make it simpler to identify the problem. But I don't know what the problem is! In Firefox it looks fine. In IE there is a line on the left of the content area. The line is caused by the background-image of #content. I don't understand why it's showing up, though, since the images are supposed to be floating left (thus, covering the background image)... but it appears they aren't floating ALL THE WAY to the left, there is a gap. I made sure all the padding and stuff was 0 but that doesn't help. Thanks in advance, ~wz Hey Guys, Im kinda stuck, my site here -beta.thenpcs.com just displays the backround in IE6. The CSS validates so im not sure what im doing wrong :/ Thanks! Hi, why Firefox shows it wrong and IE right? The website is www.theoutsourcingcompany.com If I change the value of margin-top to zero for the divs div-logo and div-text it looks good on both browsers but there's too much white space on top of the logo and the text... I am very frustrated, please help me. Here's the code for the HTML: 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=utf-8" />
<title>The Outsourcing Company - Web design, copywriting, programming. | Outsourcing Services</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
text-align: center;
margin: 0;
background-color: #9e0b0f;
background-image: url(images/back.jpg);
background-repeat: repeat-x;
}
</style>
</head>
<body>
<div class="div-header"></div>
<div class="div-middle">
<div class="div-logo">
<p><img src="images/logo.jpg" alt="The Outsourcing Company" width="193" height="55" /></p>
<p><span class="div-menu"><img src="images/home.jpg" alt="Home" width="96" height="26" /><br />
<img src="images/about-us.jpg" alt="About Us" width="96" height="26" /><br />
<img src="images/ourservices.jpg" alt="Our Services" width="96" height="26" /><br />
<img src="images/contactus.jpg" alt="Contact Us" width="96" height="26" /></span></p>
</div>
<div class="div-text">
<p>The Outsourcing Company is your business partner for:</p>
<p><img src="images/bullet.jpg" alt="Bullet" width="12" height="24" /> Software Development<br />
<img src="images/bullet.jpg" alt="Bullet" width="12" height="24" /> Content Generation / Article Writing<br />
<img src="images/bullet.jpg" alt="Bullet" width="12" height="24" /> Internet Marketing<br />
<img src="images/bullet.jpg" alt="Bullet" width="12" height="24" /> Search Engine Optimization (SEO)<br />
<img src="images/bullet.jpg" alt="Bullet" width="12" height="24" /> Pay-Per-Click (PPC) Campaigns Management<br />
<img src="images/bullet.jpg" alt="Bullet" width="12" height="24" /> Professional Copywriting Services</p>
<p>We have two goals:</p>
<p><img src="images/bullet.jpg" alt="Bullet" width="12" height="24" /> Help you make more money by increasing your revenues<br />
<img src="images/bullet.jpg" alt="Bullet" width="12" height="24" /> Help you save money by optimizing your costs and processes</p>
</div>
</div>
<div class="div-footer"></div>
</body>
</html>
And this is the CSS: Code:
.div-header {
background-image: url(images/header-blank.jpg);
background-repeat: no-repeat;
margin: auto;
height: 164px;
width: 800px;
}
.div-footer {
background-image: url(images/footer.jpg);
background-repeat: no-repeat;
margin: auto;
height: 48px;
width: 800px;
}
.div-logo {
height: 55px;
width: 193px;
margin-left: 40px;
text-align: right;
float: left;
margin-top: -120px;
}
.div-text {
float: left;
text-align: left;
width: 485px;
padding-left: 30px;
font-family: "Myriad Pro";
font-size: 13px;
margin-top: -108px;
}
.div-middle {
background-image: url(images/middle.jpg);
background-repeat: repeat-y;
margin: auto;
width: 800px;
height: 1000px;
}
a site im working on .. (apparently I cant post URLs....) it's the normal stuff at teh beginning with porservices.formapixel and the normal web ending stuff at the end. works fine in Firefox. I validated with transitional. In IE7 the background images for the main divs show up but the entire content and header do not. I thought for some reason it had to do with the z-index. So I removed it from the CSS and changed the .gifs to .pngs that are transparent in the center. It still doesnt work. I'm lost. Quote: #bg { position: absolute; top: 0px; left: 0px; background: #fff url('images/bg.png') no-repeat; width: 747px; height: 264px; } #wrapper { position: relative; width: 747px; margin: 0 auto; background: #fff url('images/abg.png') repeat-y; } that is the css relating to the two images that seem to be blocking everything (that's the only thing I can figure is that those two bg images are just sitting on top of everything.) any suggestions? I can provide the entire css file if necessary just didnt want to post all of that here if i didnt need to. thanks in advance. Hey guys, I'm new to web design, and I've begun putting together a template for the basic aspects of my page. Everything works fine in FireFox but nothing but the background shows up in IE. It's very frustrating because I have a feeling it's something small but I don't know what that thing is. Here is the link to the template I'm working on : thehempdaddy.com/unfinished/newdesign.html Any help pointing me in the right direction will earn you a friend for life. Edit: Problem solved This topic can be locked or deleted. I tried everything and figured out the problem I have the following code which works fine in IE but not in firefox. <table width="100%" border="1" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF"> <tr><td></td></tr> </table> IE displays just white space as intended, but firefox displays a black border line. I need a white border of 1 pixel around the table. Hello, I was wondering if anyone could help me get this background image to show up in firefox. It shows up in IE. It's the first #header image. I included the other code in case something is conflicting. *edit... nvm. When I preview my page in firefox on my Mac, (via Dreamweaver's Preview function), I can see the main logo image fine. However, when I uploaded the page and image correctly, I only get a blank area. I think this is a css issue, but I can't figure it out. http://alpineec.com/TEST/index.php Any thoughts? CSS Code:
*
{
padding: 0em;
margin: 0em;
}
body
{
background-color:#999999;
padding: 35px 0px 35px 0px;
}
body,input
{
font-size: 10pt;
font-family: "georgia", "times new roman", serif;
color: #333333;
}
p
{
line-height: 1.5em;
margin-bottom: 1.0em;
text-align: justify;
}
a
{
color: #B96D00;
text-decoration: underline;
}
a:hover
{
text-decoration: none;
}
h3 span
{
font-weight: normal;
}
h3,h4
{
display: inline;
font-weight: bold;
background-repeat: no-repeat;
background-position: right;
}
h3
{
font-size: 1.7em;
padding-right: 34px;
background-image: url('images2/db1.gif');
}
h4
{
font-size: 1.2em;
padding-right: 28px;
background-image: url('images2/db2.gif');
}
.contentarea
{
padding-top: 1.3em;
}
img.left
{
position: relative;
float: left;
margin: 0em 1.8em 1.4em 0em;
}
img.right
{
position: relative;
float: right;
margin: 0em 0em 1.8em 1.8em;
}
.post .details
{
position: relative;
top: -1.5em;
font-size: 0.8em;
color: #787878;
}
.post ul.controls
{
clear: both;
}
.post ul.controls li
{
display: inline;
font-size: 0.8em;
}
.post ul.controls li a
{
background-repeat: no-repeat;
background-position: left;
padding: 0em 1.0em 0em 20px;
}
.post ul.controls li a.printerfriendly
{
background-image: url('images2/icon-printerfriendly.gif');
}
.post ul.controls li a.comments
{
background-image: url('images2/icon-comments.gif');
}
.post ul.controls li a.more
{
background-image: url('images2/icon-more.gif');
}
.box
{
position: relative;
background: #FDFCF6 url('images2/boxbg.gif') repeat-x;
left: -1.5em;
top: -1.5em;
padding: 1.5em;
border-bottom: solid 1px #E1D2BD;
margin-bottom: 1.0em;
}
ul.linklist
{
list-style: none;
}
ul.linklist li
{
line-height: 2.0em;
}
#upbg
{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 275px;
background-color:#999999;
z-index: 1;
}
#outer
{
z-index: 2;
position: relative;
/*
The width value below controls the overall width of the design. By default it's set to 82%
(so it'll take up 82% of the browser window's width). You can set it to a different percentage
value (70%, 90%, etc.) or even a pixel value (760px, 800px, etc.) to enforce a fixed width.
*/
width: 700px;
border: solid 1px #fff;
background-color: #fff;
margin: 0 auto;
}
#header
{
position: relative;
width: 100%;
background: #5a5a5a;
}
#headercontent
{
position: absolute;
bottom: -56px;
padding: 0em 2.0em 1.3em 2.0em;
left: 274px;
}
#headercontent h1
{
font-weight: normal;
color: #fff;
font-size: 2.5em;
}
#headercontent h1 sup
{
color: #777;
}
#headercontent h2
{
font-size: 1.0em;
font-weight: normal;
color: #aaa;
}
#menu
{
position: relative;
background: url('images2/menubg.jpg') repeat-x top left;
height: 20px;
padding: 0em 1.0em 0em 1.0em;
}
#menu ul
{
position: absolute;
top: 2px;
}
#menu ul li
{
position: relative;
display: inline;
}
#menu ul li a
{
padding: .5em 1.0em 0.9em 1.0em;
color: black;
text-decoration: none;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
}
#menu ul li a:hover
{
text-decoration: none;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
color: #FE3D00;
}
#menu ul li a.active
{
text-decoration: none;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
color: #FE3D00;
}
#content
{
padding: 0em 2.0em 0em 2.0em;
}
#primarycontainer
{
float: left;
margin-right: -18.0em;
width: 100%;
}
#primarycontent
{
margin: 1.5em 22.0em 0em 0em;
}
#secondarycontent
{
margin-top: 1.5em;
float: right;
width: 18.0em;
}
#footer
{
position: relative;
height: 2.0em;
clear: both;
padding-top: 5.0em;
background: #fff url('images2/border2.gif') repeat-x 0em 2.5em;
font-size: 0.8em;
}
#footer .left
{
position: absolute;
left: 191px;
bottom: 1.2em;
z-index: 10;
}
#footer .right
{
position: absolute;
right: 2.0em;
bottom: 1.2em;
}
pre {
padding:10px;
border: 1px dotted #eee;
background-color:#f9f9f9;
}
#photodiv {
background-repeat: no-repeat;
}
#aboutBLOCK{padding-left:40px;}
/* PHOTO GALLERY */
#pg {
border:2px dotted #666;
padding:5px;
padding-top:15px;
}
#pg ul {
list-style:none;
left: 10px;
padding:0;
margin:0;
position:relative;
float:left;
}
#pg ul li {
display:inline;
float:left;
margin:0 0 8px 8px;
}
#pg ul li a {
display:block;
width:90px;
height:90px;
text-decoration:none;
border:1px solid #000;
}
#pg ul li a img {
display:block;
width:90px;
height:90px;
border:0;
}
#pg ul li a:hover {
white-space:normal;
border-color:#336600;
background-color:#323E20;
}
#pg ul li a:hover img {
position:absolute;
left: 290px;
top:110px;
width:300px;
height: 300px;
border:1px solid #000;
}
#pg ul li a span {display:none}
#pg ul li a:hover span {
display:block;
position:absolute;
left:9px;
top:110px;
width:270px;
height:auto;
font-size:12px;color: black;
}
On my website (www.tonecollector.com) I use CSS to get a dashed style to my header. The header also has a background image. Without the background image it works ok, but with the background image it doesn't. The CSS: .headertabel { background-image: url(/img/headerbg.gif); background-color: #FF7B08; font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #FFF6DB; text-decoration: none; border-left: 6px dashed #FF7B08; border-right: 6px dashed #FF7B08; } The Problem: http://www.tonecollector.com/dev/what.gif Whats the solution? Hi guys I've added a banner zone in my site, but it is not looking good in FF nor IE !! Site: www.stockestate.com Code for the banner zone (div) Code: #banner {
float:left;
position:relative;
top:0px;
left:25px;
width:468px;
height:60px;
margin-top: 50px;
padding: 4px 4px 4px 4px;
}
Does any1 know what should I try to fix this ? Thanks I have a list that I've created with the list-style-type being an image. For some reason, the space between the list-style-image and the list text differs in IE and Firefox. Has this happened to anyone else, or am I doing something incorrectly? Below is the code. The cell that these lists sit in has has an id of 'cellid'. Code:
#cellid {
margin: 0 0;
padding: 0 0;
}
#cellid ul {
margin: 10px 0 0 20px;
padding: 0 0;
}
#cellid li {
margin: 0 0;
padding: 0 0;
list-style-image: url(images/idxyellowlist.gif);
}
The ul has a margin of 20px on the left to line up with an element above it. Does anyone have any ideas as to how to get around this space? Thanks, Brian Seems like most people use unordered lists for menus. Code: <ul> <li>menu1</li> <li>menu2</li> <li>menu3</li> </ul> Others use definition lists. They claim it is less buggy with IE. Code: <dl> <dt>menu1</dt> <dt>menu2</dt> <dt>menu3</dt> </dl> Any thoughts on whether unordered lists or definition lists are best? Also, I sometimes see the menu text surrounded by a SPAN tag. I believe this has to do with only being able to assign one attribute to an element, but am uncertain. Can anyone help explain? Also, if I want a single HTML to work with various CSS, is it a good idea to always include the SPAN tag? Code: <ul> <li><span>menu1</span></li> <li><span>menu2</span></li> <li><span>menu3</span></li> </ul> Thanks |
|||||||