|
CSS - H Nav List Looks Great In Ie Horrible In Firefox
Essentially it lines up correctly but when I view it in firefox it doesn't. How should I tweak my code to make this work? Here is the url: http://www.westcadet.com/designs/index.htm Here is the CSS code snippet that is making this all work Code: /*--------------- Navigation Layout Begin ---------------*/
#HeaderTopLeftInnerRight {
width:618px;
height:100px;
vertical-align:top;
}
#NavMenu {
width:600px;
padding-top:22px;
}
#NavMenu ul {
list-style: none;
margin-left:22px;
}
#NavMenu li {
float: left;
padding-left:8px;
padding-right:8px;
}
#NavMenu li a {
color:#FFFFFF;
text-decoration: none;
}
#NavMenu li a:hover {
color:#EB2A2D;
}
.NavChosen {
background-color: #858181;
color:#FFFFFF;
}
Similar TutorialsI'm pretty green with CSS (okay, ALL of html ) I used a template from Mollio.org, then modified it, problem is things just dont look right in IE. url: http://www.m87-blackhole.org/foo/ css file: http://www.m87-blackhole.org/foo/css/wushuwest.css js http://www.m87-blackhole.org/foo/js/common.js The biggest problem is the handling of png+transperancy, I added a fix for it in common.js but it doesnt seem to work very well. Also, the head image, in firefox it has a width of 800, which is what I want, but in IE it spans the entire page, how can I fix that? Any ideas, pointers or resources? Thanks, Mike Hello everyone. I have been working on a redesign of my current website for a while. Early on, I realized that the design was flawed for I.E. (I use Firefox on a regular basis for testing). I went ahead and just finished the design anyway, using Firefox to test. Now that it's done, I'm hoping that there's some stupid error in my CSS that's causing the problems, and hoping that someone can find the problem. If it's a big problem and alot of work to fix, I'm willing to pay someone to help me correct the issue. The main problem is my navigation bar at the top, which consists of drop-down menus. There's also a problem with how the background lines up. If you want to see what I'm talking about, go look at the site both in Firefox and I.E. The URL is: http://www.favillephoto.com/new website/index.html I have 2 different css files. One for my index page, because it is designed differently and has a sidebar. And then a second one for the rest of my pages on the site. I'll attach the CSS for both, in case there's an issue there. Thanks in advance for your help. This is the css file for my index page: Code: body {
padding: 0;
background: #ffffff url('images/img01.jpg');
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 13px;
color: #333333; margin-left:0; margin-right:0; margin-top:20px; margin-bottom:0
}
h1, h2, h3, h4 {
margin: 0;
font-weight: normal;
color: #AD1112;
}
h1 {
font-size: 250%;
}
h2 {
font-size: 180%;
}
h3 {
font-size: 140%;
font-weight: bold;
}
h4 {
font-size: 100%;
font-weight: bold;
}
p, ol, ul {
line-height: 180%;
}
p {
}
ol {
}
ul {
}
blockquote {
margin: 0;
padding-left: 20px;
font-style: italic;
}
blockquote * {
line-height: normal;
}
a {
color: #1267bc;
}
a:hover {
color: #999999;
}
img {
border: none;
}
img.left {
float: left;
margin: 10px 15px 0 0;
}
img.right {
float: right;
margin: 0 0 0 15px;
}
hr {
display: none;
}
/* Header */
#header {
width: 1030px;
height: 260px;
margin: 0 auto;
background: url('images/img02.jpg') no-repeat right top;
}
/* Menu */
#menu {
float: right;
width: 1030px;
height: 40px;
padding: 220px 0 0 0;
}
#menu a {
display: block;
height: 32px;
background: url('images/img06.gif') no-repeat;
text-decoration: none;
font-size: 13px;
font-weight: bold;
color: #FFFFFF; padding-left:12px; padding-right:13px; padding-top:8px; padding-bottom:0
}
#menu ul {
width: 1026px;
height: 40px;
margin: 0;
padding: 0;
background: #AD1011 url('images/img05.jpg') repeat-x;
border-left: 2px solid #FFFFFF;
border-right: 2px solid #FFFFFF;
list-style-type:none
}
#menu li {
margin: 0;
padding: 0;
list-style: none;
float: left;
}
#menu li a:hover
{ color: #123456;}
#menu div
{ position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: #000000;
}
#menu div a
{ position: relative;
display: block;
margin: 0;
padding: 3px 10px;
width: auto;
height: 20px;
white-space: nowrap;
text-align: left;
background: #6c91c5;
color: #ffffff;}
#menu div a:hover
{ color: #123456;}
/* Page */
#page {
width: 1030px;
margin: 0 auto;
}
/* Content */
#content {
float: left;
width: 760px;
height: 2040px;
padding: 20px;
background: #FFFFFF url('images/img07.gif') no-repeat left bottom;
}
/* Sidebar */
#sidebar {
float: right;
width: 220px;
height: 2070px;
padding-top: 10px;
padding-right: 10px;
background: #ffffff url('images/img07a.gif') no-repeat right bottom;
}
#sidebar a {
color: #dddddd;
}
#sidebar a:hover {
color: #999999;
text-decoration: underline;
}
#sidebar ul {
margin-left: 0;
padding-left: 0;
list-style: none;
font-size: 92%;
}
#sidebar ul li {
background: url('images/img13.gif') no-repeat 0px 12px;
border-top: 1px solid #0B0B0B; padding-left:14px; padding-right:14px; padding-top:5px; padding-bottom:5px
}
#sidebar ul li.first {
border: none;
}
#sidebar ul li h2 {
margin: 0;
font-size: 100%;
}
#sidebar ul li h3 {
margin: 0;
font-size: 92%;
}
#sidebar ul li p {
color: #dddddd;
margin: 0;
}
#sidebar p {
color: #dddddd;
margin: 0;
font-size: 92%;
}
.boxed {
margin-bottom: 10px;
background: #113c5c url('images/img10.gif') no-repeat left bottom;
}
.boxed .title {
height: 30px;
margin: 0;
background: #000000 url('images/img08.jpg') no-repeat;
font-size: 16px;
font-weight: bold;
color: #000000; padding-left:0px; padding-right:0; padding-top:10px; padding-bottom:0
}
.boxed .content {
padding: 15px;
background: url('images/img09.gif') repeat-x;
}
.boxedPrintoftheMonth {
margin-left: -790px;
background: #113c5c url('images/img10PotM.gif') no-repeat left bottom;
}
.boxedPrintoftheMonth .title {
height: 30px;
margin: 0;
background: #000000 url('images/img08PotM.jpg') no-repeat;
font-size: 16px;
font-weight: bold;
color: #000000; padding-left:0px; padding-right:0; padding-top:10px; padding-bottom:0
}
.boxedPrintoftheMonth .content {
padding: 15px;
background: url('images/img09.gif') repeat-x;
}
/* Footer */
#footer p {
margin: 0;
line-height: normal;
font-size: 85%;
color: #000000;
}
#footer a {
color: #000000;
}
#footer a:hover {
color: #666666;
}
This is the css for the rest of my pages: Code:
body {
padding: 0;
background: #ffffff url('images/img01.jpg');
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 13px;
color: #333333; margin-left:0; margin-right:0; margin-top:20px; margin-bottom:0
}
h1, h2, h3, h4 {
margin: 0;
font-weight: normal;
color: #AD1112;
}
h1 {
font-size: 250%;
}
h2 {
font-size: 180%;
}
h3 {
font-size: 140%;
font-weight: bold;
}
h4 {
font-size: 100%;
font-weight: bold;
}
p, ol, ul {
line-height: 180%;
}
p {
}
ol {
}
ul {
}
blockquote {
margin: 0;
padding-left: 20px;
font-style: italic;
}
blockquote * {
line-height: normal;
}
a {
color: #1267bc;
}
a:hover {
color: #999999;
}
img {
border: none;
}
img.left {
float: left;
margin: 10px 15px 0 0;
}
img.right {
float: right;
margin: 0 0 0 15px;
}
img.left1 {
float: left;
margin: 0 70px 0 70px;
}
img.right1 {
float: right;
margin: 0 70px 0 70px;
}
img.left2 {
float: left;
margin: 20px 100px 20px 100px;
}
img.right2 {
float: right;
margin: 30px 120px 20px 120px;
}
img.left3 {
float: left;
margin: 0 110px 0 110px;
}
img.right3 {
float: right;
margin: 20px 60px 0 60px;
}
hr {
display: none;
}
/* Header */
#header {
width: 1030px;
height: 260px;
margin: 0 auto;
background: url('images/img02.jpg') no-repeat right top;
}
/* Menu */
#menu {
float: right;
width: 1030px;
height: 40px;
padding: 220px 0 0 0;
}
#menu a {
display: block;
height: 32px;
background: url('images/img06.gif') no-repeat;
text-decoration: none;
font-size: 13px;
font-weight: bold;
color: #FFFFFF; padding-left:12px; padding-right:13px; padding-top:8px; padding-bottom:0
}
#menu ul {
width: 1026px;
height: 40px;
margin: 0;
padding: 0;
background: #AD1011 url('images/img05.jpg') repeat-x;
border-left: 2px solid #FFFFFF;
border-right: 2px solid #FFFFFF;
list-style-type:none
}
#menu li {
margin: 0;
padding: 0;
list-style: none;
float: left;
}
#menu li a:hover
{ color: #123456;}
#menu div
{ position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: #000000;
}
#menu div a
{ position: relative;
display: block;
margin: 0;
padding: 3px 10px;
width: auto;
height: 20px;
white-space: nowrap;
text-align: left;
background: #6c91c5;
color: #ffffff;}
#menu div a:hover
{ color: #123456;}
/* Page */
#page {
width: 1030px;
margin: 0 auto;
}
/* Content */
#content {
float: left;
width: 990px;
padding: 20px;
background: #FFFFFF url('images/img07b.gif') no-repeat left bottom;
}
/* Footer */
#footer p {
margin: 0;
line-height: normal;
font-size: 85%;
color: #000000;
}
#footer a {
color: #000000;
}
#footer a:hover {
color: #666666;
}
I cannot find the problem. I spent long enough time trying to get a similair look in both IE and FireFox, now I am the closest to it, and there is an overflow problem. It is working in IE, however, FireFox is not displaying it how I want it to be displayed. http://kingtoad.net/development/eticket/ Haven't checked on IE for Windows, but here are my issues on the mac: my list items Elixir Volume 1, 2, etc are not left-aligned in IE and I cannot figure out why! my arrow list image is not showing up in IE the signup form fields are not formatted properly in IE. they look fine in Firefox though. the url: http://www . nectardesign . com the source code: Code: <td valign="top" align="left" width="230">
<span class="hometext"><b>RECENT ELIXIR NEWSLETTERS</b></span><br /><br />
<span class="hometext"><ul><li><a href="/blog/2008/04/04/elixir" rel="bookmark" title="Elixir (Volume 1, Issue 3)">Elixir (Volume 1, Issue 3)</a><br />Going with the Lateral Flow...</li><li><a href="/blog/2008/03/19/ekuxur-volume1-issue-2" rel="bookmark" title="Elixir (volume1, Issue 2)">Elixir (volume1, Issue 2)</a><br />Chilling for Recovery...</li><li><a href="/blog/2008/03/05/39" rel="bookmark" title="Elixir (volume1, Issue 1)">Elixir (volume1, Issue 1)</a><br />Making Children Healthier with Design...</li></ul></span>
<span class="hometext">Receive our monthly design-industry newsletter <a href="http://www.nectardesign.com/blog/index.php?s=elixir">Elixir</a> via email:</span><br />
<div class="ddfmwrap"><form class="ddfm" method="post" action="http://www.nectardesign.com/" enctype="multipart/form-data">
<p class="fieldwrap"><label for="fm_name">Name</label><input class="fmtext" type="text" name="fm_name" id="fm_name" value="" /></p>
<p class="fieldwrap"><label for="fm_email">Email</label><input class="fmtext" type="text" name="fm_email" id="fm_email" value="" /></p>
<p><input type="hidden" name="MAX_FILE_SIZE" value="1000000" /></p>
<div class="submit"><input type="submit" name="form_submitted" value="Join List" /></div>
</form></div>
and the css: Code: .hometext {
font-size: 12px;
/*width: 230px;*/
letter-spacing:.02em;
padding: 0 10px 0 0px;
background: #fff;
color: #7F7F7F;
text-align: left;
}
.hometext a {
color: #FE6E18;
}
.hometext a:hover {
color: #7F7F7F;
}
.hometext ul {
list-style-image: url(http://www.nectardesign.com/images/arrow.gif);
margin-left:3px;
margin-top:0px;
padding:0 0 0 15px;
clear:both;
text-align: left;
}
.hometext li {
padding:0 0 5px 0;
clear:both;
text-align: left;
width: 230;
]
I'm beating my head against the wall on this one and could use some expert help. In full disclosure, I am using a css template site I found on a open source template site. The site renders fine in Firefox and Opera, but is problematic with some pages. Here is one of the pages I am having trouble with in IE: http://worldwidemediaproject.com/tvrating.php You'll notice that in IE it appears like there are a bunch of <br>'s after the TV Stations header. This does not appear in either Firefox or Opera. The strange thing is this one appears fine in IE: http://worldwidemediaproject.com/tvrating.php?id=71&language=all&genre=all but this one doesn't: http://worldwidemediaproject.com/tvrating.php?id=216&language=all&genre=all The only real difference is that the table size is larger in the pages that have display problems. Is there some kind of IE hack that I need to apply? Many thanks.... Check out this site (WIP)... the issue specifically is with the Screenshots table... Firefox displays exactly like I would expect it to, screenshots contained within a div, with overflow: auto... looks great in firefox, nicely aligned, no vert. scrollbar... perfect. Now look at it in IE... looks like it is automatically expanding to include ALL 10 screenshots, which stretches the whole page... I've done a little research on this, but I can't find a way to get IE to behave... tried word-wrap: break word (as suggested on another site), but this fails as I'm using images. What makes IE decide to expand the <div> tag automatically. Here's the code pertaining just to the screenshots section. Any help or advice you might give me would be appreciated, I've spent a long time developing the site in css and have only opted to use tables for this particular page... thanks! the CSS: --------------------------------------------------------- .screenshots_table { width: 100%; border: 1px solid #000; backgroung-color: #061840; line-height: 15px; } #screenshots_table_overflow { overflow: auto; padding: 0px; display: block; } --------------------------------------------------------- the html: --------------------------------------------------------- /* --- START SCREENSHOTS CONTAINER --- */ // establish the number of screens in the directory $dir_path = "Game Archive/" . $platform_name . "/". $title . "/Screen Captures/"; $screen_count = count (glob ($dir_path . "screen*.jpg")); echo"<td colspan='5'>"; echo"<table border='0' cellpadding='0' cellspacing='0'>"; echo"<tr>"; /* start screenshots details tab */ echo"<td>"; echo"<table border='0' cellpadding='0' cellspacing='0'>"; echo"<tr>"; echo"<td><img border='0' width='38px' class='display_block'"; echo"src='images/tab_left.jpg'></td>"; echo"<td width='100%' background='images/tab_bg.jpg'></td>"; echo"<td><img border='0' class='display_block' width='70px'"; echo"src='images/tab_screenshots.jpg'></td>"; echo"</tr>"; echo"</table>"; echo"</td>"; /* end screenshots tab */ echo"</tr><tr>"; /* start screenshots */ echo"<td>"; echo"<div id='screenshots_table_overflow'>"; echo"<table width='100%' border='0' class='screenshots_table'"; echo" cellpadding='0' cellspacing='0'>"; echo"<tr>"; // iterate through loop and display linked screenshots as req'd for ($i = 1; $i < $screen_count + 1; $i++) { echo"<td cellspacing='1' valign='top' bgcolor='#04112d'>"; echo "<a href='Game Archive/" . $platform_name . "/" . $title . "/Screen Captures/screen" . $i . ".jpg' rel='lightbox' class='horizontal'><img border='0' class='border' src='Game Archive/" . $platform_name . "/" . $title . "/Screen Captures/small" . $i . ".jpg' /></a>"; echo"</td>"; } echo"</tr>"; echo"</table>"; echo"</div>"; echo"</td>"; /* end screenshots */ echo"</tr></table>"; echo"</td>"; /* --- END SCREENSHOTS CONTAINER --- */ --------------------------------------------------------- Hi folks. I'm new to this forum, but I'm not new to CSS. I've inherited a little problem that was left behind by my client's original developer. Here is the code the makes up the header on my page: Code: <body> <div id="issingle"> <div id="container"> <div id="sitename"> <a href="http://www.nectardesign.com"><img src="http://www.nectardesign.com/blog/wp-content/themes/default/nectar-product-development.gif" border="0" alt="Nectar Product Development"/></a> </div> <div id="mainmenu"> <ul> <!--<li class=""><a href="http://www.nectardesign.com/blog">Home</a></li>--> <li class="page_item"><a href="http://www.nectardesign.com/about/">about</a></li> <li class="page_item"><a href="http://www.nectardesign.com/service/">service</a></li> <li class="page_item"><a href="http://www.nectardesign.com/category/all-products">portfolio</a></li> <li class="page_item current_page_item"><a href="http://www.nectardesign.com/blog/">blog</a></li> <li class="page_item"><a href="http://www.nectardesign.com/blog/category/news/">news</a></li> <li class="page_item"><a href="http://www.nectardesign.com/career/">career</a></li> <li class="page_item no_bar"><a href="http://www.nectardesign.com/contact/">contact</a></li> </ul> </div> And here is the css pertaining to that code: Code: body {
background:#fff;
color:#303030;
font: normal 12px /*Verdana,Tahoma,*/Arial, sans-serif;
margin:0 auto;
padding:0;
text-align:center;
width:850px;
}
#container {
position: relative;
background:url('http://www.nectardesign.com/images/headerbg.jpg') top center repeat-x;
color:#303030;
border:1px solid #C8C8C8;
margin:10px;
/* padding:10px;*/
text-align:left;
height:598px;
}
html>body #container {height: 1%; min-height: 598px;}
#mainmenu {
position: absolute;
right: 10px;
top: 27px;
margin-right: 5px;
}
#mainmenu li.page_item {
float:left;
/* height:35px;*/
list-style:none;
margin:0;
padding:0;
}
#mainmenu a {
border-right:1px solid #b0b0b0;
color:#808080;
display:block;
margin: 0;
padding: 1px 8px;
text-transform:lowercase;
}
Basically, this page's header looks correct in Firefox and Safari, but terrible in IE 5.x (Mac). Not only do the horizontal links (About, Service, Portfolio...) not show up correctly--they're actually on the left sidebar--but the repeating image doesn't repeat like it should. It doesn't even show up at all. Since I'm new, please don't hesitate to let me know if I'm forgetting to include any other important info. Thank you!! J Hi; I got two problem in my code. 1) a list of menu could not sit in the center. 2) a list menu has a gap from top in the Firefox, but there is not gap from top from IE browser. And in the IE Browser, the list of menu sit too hight on the top. How could i sit the list of menu in the center and there are about 1px gas or not gas between the top and the menu bar in IE and Firefox. my code as following; Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
body {
font: 80% arial, helvetica, sans-serif;
background: white;
margin: 0;
}
#container{
position: relative;
width: 780px;
w\idth: 780;
border: solid #036;
border-width: 0 3px;
margin: auto;
}
#navlist
{
color: white;
text-align: center;
list-style-type: none;
padding-bottom: 1px;
}
#navlist li
{
bacground-color: #4c56d9;
margin-left: 1px;
display: inline;
border: 3px solid #4c56d9;
padding: 1px;
}
#navlist li a
{
text-decoration: none;
border: 2px solid #737be4;
padding: 2px;
color: white;
margin-left: 1px;
background-color: #4c56d9;
}
</style>
</head>
<body>
<div id="container">
<ul id="navlist">
<li id="active"><a href="#" id="current">Home</a></li>
<li><a href="#">Contact Us </a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Help</a></li>
</ul>
</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. On 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.! Hi, I'm using a right-to-left layout and I can't find a way to display my list items correctly on Firefox. When I insert something into the rtl div with a float, the list item does not wrap correctly. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
<!--
#content {
margin:0 200px 0 20px;
border: 2px solid #000;
direction:rtl;
}
#floatdiv {
width:100px;
height:100px;
margin:10px;
border: 1px solid #000;
float:left;
}
-->
</style>
</head>
<body>
<div id="content">
<div id="floatdiv"</div>
<p>This is a test</p>
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
</div>
</body>
</html>
Is there a problem in my code? Thanks, Ehud. http://img55. imageshack .us/img55/6775/cssexamplesy8.png ^ please remove the space before and image shack to view the image I've taken a screenshot of a problem I need help with, which is how IE and Firefox handle nested lists. Using code like this: Code:
<ul>
<li>item 1</li>
<li>item 2</li>
<li>
<ul>
<li>sub item 1</li>
<li>sub item 2</li>
</ul>
</li>
<li>item 3</li>
</ul>
Firefox displays the new list without being pushed down yet IE seems to create the space for where the list item would be and I can't figure out how to remove the space / how to get it to act like firefox. Removing the list item that holds the nested ul solves all problems but it isn't valid so I'm looking for another solution. Cheers Hello, I have a problem to display a List/Menu in IE. It cut off the text in the drop down list when I set the WIDTH of the drop down box shorter than the text. It works fine in FireFox. Here is the picture I captured to demonstrate what I'm talking about. Sorry the forum don't allow me to post url, please copy the link and paste it in your browser linklighthouse.com/dropdown_ie.html How do I fix this problem in IE? Please help! Thanks Hi All: When i use <ul><li> and <li> is set to "list-style-type: none;" IE and Firefox renders it differently. Does anybody know a work-around for this? The good example of this and the CSS code is at following holzgreen.com/list-test/ HTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>List Test 1</title> <meta name="Description" content="x.x.x. CHANGE .x.x.x"> <meta name="KeyWords" content="x.x.x. CHANGE .x.x.x"> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <META name="Publisher" content="Firework Studio"> <META name="revisit-after" content="15 days"> <META name="robots" content="index, follow"> <META name="Robots" content="All"> <link href="000-style.css" rel="stylesheet" type="text/css" /> <style type="text/css"> <!-- .style1 { font-family: "Courier New", Courier, monospace } --> </style> </head> <body> <div #none> <ol> <li>List item - 1</li> <li>List item - 2 <ol> <li>LI - 2.1</li> <li>LI - 2.2</li> </ol> </li> <li>List item - 3</li> <li>List item - 4</li> </ol> </div> </body> </html> CSS: body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 1em; border: 1px solid #000000; margin: 0em; padding: 0em; } #none ol { background: #BB0000; list-style-position: inside; margin: 0em; padding-left: 1em; /* Moves the Whole List */ } #none ol ol{ background: #BB00BB; list-style-position: inside; margin-left: 0em; padding-left: 3em; /* Moves the Nested List */ } #none ol li { background: #BBBB00; font-size: .8em; margin-left: 0em; list-style-type: none; } #none ol ol li { background: #00BBBB; font-size: 1em; list-style-type: lower-alpha; margin-left: 0em; list-style-type: none; } Thanks for your interest Hi, Here's my demo site: http://www.alpha-dreams.com/demo5/ Why is IE 7 off? I've looked everywhere. Do I need a stylesheet for IE 7? Thanks Alrighty, my friend made this menu: phreakyourgeek.com/tf2/original which looks great in Firefox/Opera. However, Internet Explorer absolutely rapes it and it comes out all whacked up. He gave me the task of redesigning it for IE. I am not a CSS whiz, but I made it this far: phreakyourgeek.com/tf2 which needs some help. -Background does not move when hovered over. -The menu is aligned along the left side, they need to align along the right CSS for my menu is embedded in the source, CSS for original is in phreakyourgeek.com/tf2/original/stylesheet.css Please help me make any adjustments to either of them; there must be a way to make the first IE compatible. Thank you for your time. EDIT: I was informed upon posting that links were not allowed for new posts; I have removed the "www." preventing such restriction. I disagree with your rule; my links are legit and without them my visit would be useless. Please look at the menu on this page, http://www.dougswansonre.com/ In IE7 it looks perfect, in FF it looks terrible??? It would seem I am always "taking" from this sites and never giving much back, but not today. I had posted a message a few days ago which generated a reply with a link to this site - http://www.sitepoint.com. While I was there, I requested a sample download of some chapters of a book. It was in the book "Html without tables" or something like that they pointed me to this sample site - www.footbagfreaks.com What an awesome way to learn css layout. I checked it in both IE and NS and it was pefect. There are three .html files and one style sheet. I know I will be studying this code if only to get the basics down. I hope this works for you. EDIT: solved, can be closed I figured it out, I think. |
|||||||