|
CSS - Ul / Li Tags... Looks Really Simple, Cant Figure It Out.
Hi,
Please take a look at: [Popup Page] http://67.18.220.222/~duoboots/2005/popup_calfwidth.php That's actually a popup page from the main website. An example 'main' page is: [Main Page] http://67.18.220.222/~duoboots/2005/latest_news.php There's a big difference on Firefox with the <ul> list - on the Main page - the list displays fine, and the bullets are small. No problems. However, on the popup page (Firefox) - the bullets are bigger. (This isnt the only problem with the list but I have simplified this page to demonstrate the above) My question is... why? There's no UL / LI definitions in my stylesheet, except for the left vertical menu. The main / popup pages have their own similar CSS 'white boxes' which include padding, and the text is displayed in these white boxes. But for some reason, the UL list on the popup page gets messed up on Firefox..... (The stylesheet can be located at: http://67.18.220.222/~duoboots/2005/styles/style.css any ideas? Thanks a lot! Similar TutorialsI used to make websites. LONG time ago, and I can't seem to recall a lot of what I used to know. So my problem is... I can not get the two div layers on the left and right moved up to meet the middle div. I've tried pretty much everything I can think of, Reordered them, but then the middle div goes too low or the first div goes wonky. Can anyone please help me figure this out? Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Untitled Document</title> <style type="text/css"> <!-- body { background-color:black; background: #000000; background-image:url background-position:center; background-repeat:repeat-y; } body, table, div { font-family:Verdana; font-size:8pt; } a:link {color:white; font-size:6pt; font-weight:bold; text-transform:uppercase; decoration:none;} a:visited {color:white; font-size:6pt; font-weight:bold; text-transform:uppercase;} a:hover {color:#8a99c2; font-size:6pt; font-weight:bold; text-transform:uppercase;} a:active {color:white; font-size:6pt; font-weight:bold; text-transform:uppercase;} scrollbar {visibility:collapse !important; } browser { overflow: hidden !important; } .indent { margin-right: 2%; margin-left: 2% } div {position:relative;} * { margin: 0; padding: 0; } p { margin: 1em 0; } #wrapper { width: 800px; margin: 0 auto; } #header { height: 100px; z-index: 2; } #right-col { border:1px; background:#29334d; font-size:6pt; text-transform:uppercase; border-style:solid; border-color:black; width: 154px; float:right; z-index: 2; margin-right:16px; } #left-col { width: 154px; z-index: 4; left:6px; border:1px; background:#29334d; font-size:6pt; text-transform:uppercase; border-style:solid; border-color:black; } #content { margin-left: 179px; z-index:3; top:204px; width:430px; } #footer { height: 78px; clear: both; z-index: 2; top:152px; padding: 5px; width:350px; } --> </style> </head> <body> <div id="wrapper"> <div id="header"><map name="map1"> <area href="" alt="Contacts" title="Contacts" shape="RECT" coords="13,233,67,249"> <area href="http://rumormillnewsradio.com/guestbios/insidersloungefree/ByDate.html" alt="Products" title="Products" shape="RECT" coords="82,233,135,249"> <area href="hl" alt="New!" title="New!" shape="RECT" coords="150,233,203,249"> </map> <img height="538" src="" width="790" usemap="#map1" style="z-index:1; border="0"></div> <div id="footer"> <iframe width="100%" height="100%" name="about" src="news.html" frameborder=0 ALLOWTRANSPARENCY="true"></iframe></div> <div id="content"><table bgcolor="#3b4974" width="100%"><tr><td> </div><p><font color="#8a99c2"> <p class="indent"> Your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. </p></font> </td></tr></table></div> <div id="right-col"><font color="#59637d"> <br> <b> Shows last week:</b><br><br> <iframe width="100%" height="100%" name="Lastweekshow" src="" frameborder=0 ALLOWTRANSPARENCY="true"></iframe></div> <div id="left-col"> <br> <br> <b> <a href="http://">Link</a></b> <br><center>.....................................</center><br> <br> <br> <b> <a href="http://">Link</a></b> <br><center>.....................................</center><br> <br> <br> <b> <a href="http://">Link</a></b> <br><center>.....................................</center><br> <br> <br> <b> <a href="http://">Link</a></b> <br><center>.....................................</center><br> <br> <br> <b> <a href="http://">Link</a></b> <br><center>.....................................</center><br> <br> <br> <b> <a href="http://">Link</a></b> <br><center>.....................................</center><br> <br> <br> <b> <a href="http://">Link</a></b> <br><center>.....................................</center><br> </font></div> </div> </body> </html>
http://lovemeforme.org/index.php?wptheme=Scarlett+Orange if you scroll down to where it has "themes" on the sidebar, you notice the last one isn't a link and says "scarlett orange." Why does it not go past the image bullet like the others, how can I fix that? any ideas? thanks in advance. So, I've been making a lot of sites, and keep trying to learn and use divs as you all always recommend. But I always encounter problems, so revert back to tables. Well I'm working on a site using divs right now, but for some reason, it's not working properly. In IE6, there's a gray border between the logo and banner. In FF, the left navigation menu is on the right. Here's the CSS I'm using: Code:
.spacer {width:150px;
float:left;
background-color:yellow;
height:35px;
}
body {background-color:#cccccc;
margin:0;
font-family:Times New Roman;
}
.width780 {width:780px;
}
.sitelinks div{background-color:green;
float:left;
padding:5px;
width:93px;
border-right:2px solid black;
border-bottom:2px solid black;
border-top:2px solid black;
}
.sitelinks a{display:block;
background-color:green;
text-align:center;
text-decoration:none;
color:black;
}
.sitelinks a:hover{background-color:orange;
}
.leftnav {width:150px;
height:500px;
background-color:yellow;
}
.logo {background-color:yellow;
width:150px;
height:150px;
float:left;
}
.banner {background-color:pink;
height:150px;
}
.content {background-color:white;
vertical-align:top;
padding:5px;
}
Here's the html: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Page Title</title> <link rel="stylesheet" type="text/css" href="realty.css" /> </head> <body> <div class="width780"> <div class="logo"> Logo </div> <div class="banner"> Banner </div> </div> <div class="width780"> <div class="spacer"> </div> <!-- Navigational Bar --> <div class="sitelinks"> <div> <a href="#">Cat 1</a> </div> <div> <a href="#">Cat 2</a> </div> <div> <a href="#">Cat 3</a> </div> <div> <a href="#">Cat 4</a> </div> <div> <a href="#">Cat 5</a> </div> <div> <a href="#">Cat 6</a> </div> </div> </div> <!-- End Navigational Bar --> <!-- Left Navigation --> <div style="float:none;"> <div class="leftnav" style="float:left;"> Left menu </div> <!-- End Left Navigation --> <!-- Content Box --> <div style="width:600px;"> <div class="content" style="height:500px;"> <!-- Content goes in here --> Content Goes here <!-- End Content --> </div> </div> </div> <!-- End Content Box --> Here's the site: 805chesapeake.com (Ignore the colors.. i know they're ugly) ...of this funkiness. So hi, folks - I'm a longtime listener, first-time caller. I'm currently building my first CSS/XHTML storefront coded entirely by hand, and have run into some difficulties with--you guessed it--Internet Explorer. The issue is with the Nav Bar - IE seems to want to squash the items up, which makes the bar much taller than it should be. Here's a screenshot of what it looks like in IE6 (or what it DID look like, before I added the AlphaImageLoader filter. Now it looks the same, only the logo is transparent). Here's the same page in Safari. And here's a look at the dev site, in case you want to see it in action yourselves. (We're not live yet, so please don't make an order, thanks.) Ignoring all the other major funkiness (I know the code is a little sloppy, in places - I'm just trying to work through the problems, one at a time, before I go about doing some cleaning), any idea what the deal might be with the Nav Bar? I should mention the following: The Nav items are in an un-ordered list, and floated to line them up. There's some funkiness with IDs - each item in the list is meant to have a distinct ID (was gonna use this for a CSS-based 'you are here' functionality, but got hasty and entered the same ID for all the items. Plan to fix it). As it is, it isn't currently to standards...but I don't think that's what's causing the funky layout. Here's the HTML: Code: <!-- MainNav --> <ul id="MainNav"> <li id="Nav-Shirts"><a href="/store/mens/">Shirts</a></li> <li id="Nav-Shirts"><a href="#">Info</a></li> <li id="Nav-Shirts"><a href="#">About Us</a></li> <li id="Nav-Shirts"><a href="#">Affiliates</a></li> <li id="Nav-Shirts"><a href="#">E-List</a></li> </ul> Here's the CSS: Code: #MainNav {
margin: 25px 50px 0px 0px;
padding: 0px 0px 0px 287px;
background: #b9b18d;
list-style: none;
width: 450px;
float: left;
display: inline;
}
#MainNav li {
float: left;
display: inline;
}
#MainNav a {
padding: 0px 9px;
line-height: 20px;
font-size: 12px;
letter-spacing: -.1em;
text-decoration: none;
text-transform: uppercase;
font-weight: lighter;
color: #695030;
float: left;
display: inline;
}
#MainNav a:visited {
color: #695030;
}
#MainNav a:hover {
color: #ebe9c2;
}
I originally thought it was the double-margin float bug...but as you can see, I added 'display:inline' to all of the CSS elements, and it still doesn't solve the problem. I also thought about giving them each a defined width, as I vaguely remember some IE bug that prefers that sort of thing...but I'm not sure that that would help with this problem, given the way the items are squashed. Anyway, I'm more than a little lost at this point, because I can't figure out which bug in particular is causing this problem (almost all of the IE positioning bugs I've read up on sound like they could be the problem...but since I have no way of seeing what the margins look like in IE (there's no Xyle Scope on Windows, and trial-and-erroring it seems like it would kill me), I can't figure out exactly what's happening to cause it). If I knew the problem I could find a solution. But...alas. Any thoughts? Anyone dealt with this sort of thing before? Could it be the three-pixel text jog bug? What am I missing? (And if you do look at it and know exactly what the problem is, how would you recommend going about fixing it?) Thanks for reading! L Hey guys, I'm new (So I hope this will be posted in the right place). I'm working on this website for a friend, but for the life of me I can't figure out how to get this main table's bg color to either have a lower opacity, or display a png that's been modified with a lower opacity. I've tried everything. Whenever I put in a white background and use the lower opacity (for both EI and Firefox) it fades both the background and the text. When I try to put in the png, nothing shows up at all. I know HTML a lot better than I do CSS, but I used a template this time around so that the side navigation bar would actually work (And the template uses CSS). The website's link is: (52ndstreetjewelry . com) The current background in there is a light pink, but it's not that great looking. Anyone have any ideas? (If that made any sense at all?) I'm wracking my brain, and I can't figure out why my content (which was fine when I just had it sitting in my empty graphical box) is now spaced half-way down the page. My work in progress is at "www *dot* deepwaterchurch *dot* com *slash* next" I'd really appreciate any help. Thanks so much in advance. P.S. The code is below (inline CSS for ease of fiddling): Code: <!--
*,html{margin:0;padding:0;}
body{
background:black url("images/water.jpg") repeat-x top left;
color:white;
font:12pt verdana,arial,helvetica,geneva,sans-serif;
width:100%;
height:auto;
}
#container {
width: 960px;
position:relative;
margin:0 auto;
/*overflow:hidden;*/
}
#logo {
position: absolute;
background-image: url(images/logo.jpg);
right: 52px;
top: 15px;
width: 250px;
height: 131px;
}
#top {
background:url(images/top.png) no-repeat;
width: 956px;
height: 646px;
}
#content-container {
background:url(images/boxmiddlerepeatable.png);
position:relative;
width:852px;
overflow:hidden;
margin:0 auto;
margin-top:-631px;
top:0px;
left:-2px;
}
#content{
position:relative;
margin:10px auto 0;
width:805px;
left:10px;
top:0;
min-height:646px;
}
#bottom {
background-image:url(images/boxbottom.png);
position:relative;
height:12px;
width:851px;
top:5px;
}
a:link {
color: #3f7ba3;
text-decoration: none;
}
a:visited {
text-decoration: none;
color:#3f7ba3;
}
a:hover {
text-decoration: none;
color: #FFCC33;
}
a:active {
text-decoration: none;
}
h1 {
font-size: 9px;
text-transform: uppercase;
color:#666666;
}
h2 {
font-size: 13px;
font-weight:900;
color:#FFFFFF;
}
h3 {
color:#999999;
font-weight:400;
font-size:12px;
}
#logo {
position: absolute;
background-image: url(images/logo.jpg);
right: 52px;
top: 15px;
width: 250px;
height: 131px;
}
.clear{clear:both;height:15px;
}
#navtabs {
width:462px;
height:60px;
position:absolute;
top:-10px;
left:5px;
}
#navtabs ul {
display: inline;
margin: 0;
padding: 0;
}
#navtabs li {
display: inline;
list-style: none;
margin: 0;
padding: 0;
float: left;
position: relative;
width: auto;
}
#navtabs li ul {
position: absolute;
width: 10em;
left: -999em;
}
#navtabs li:hover ul {
left: auto;
}
#navtabs li:hover ul, #navtabs li.sfhover ul {
left: auto;
}
li.whoweare a {
background-color:#000000;
background: url(images/navigation/whoweare.jpg);
display: block;
width: 77px;
height: 67px;
text-indent: -999999px;
overflow: hidden;
}
li.whoweare a:hover {
background-color:#000001;
background: url(images/navigation/whoweare.jpg);
background-position:
-77px 0;
}
li.whatwedo a {
background-color:#000000;
background: url(images/navigation/whatwedo.jpg);
display: block;
width: 77px;
height: 67px;
text-indent: -999999px;
overflow: hidden;
}
li.whatwedo a:hover {
background-color:#000001;
background: url(images/navigation/whatwedo.jpg);
background-position:
-77px 0;
}
li.whatwedodown a {
background-color:#000002;
background: url(images/navigation/whatwedo.jpg);
display: block;
width: 77px;
height: 67px;
text-indent: -999999px;
overflow: hidden;
background-position:-77px 0;
}
li.beforeyoucome a {
background-color:#000000;
background: url(images/navigation/beforeyoucome.jpg);
display: block;
width: 77px;
height: 67px;
text-indent: -999999px;
overflow: hidden;
}
li.beforeyoucome a:hover {
background-color:#000001;
background: url(images/navigation/beforeyoucome.jpg);
background-position:
-77px 0;
}
li.beforeyoucomedown a {
background-color:#000002;
background: url(images/navigation/beforeyoucome.jpg);
display: block;
width: 77px;
height: 67px;
text-indent: -999999px;
overflow: hidden;
background-position:-77px 0;
}
li.onceyourehere a {
background-color:#000000;
background: url(images/navigation/onceyourehere.jpg);
display: block;
width: 77px;
height: 67px;
text-indent: -999999px;
overflow: hidden;
}
li.onceyourehere a:hover {
background-color:#000001;
background: url(images/navigation/onceyourehere.jpg);
background-position:
-77px 0;
}
li.onceyoureheredown a {
background-color:#000002;
background: url(images/navigation/onceyourehere.jpg);
display: block;
width: 77px;
height: 67px;
text-indent: -999999px;
overflow: hidden;
background-position:-77px 0;
}
li.faq a {
background-color:#000000;
background: url(images/navigation/faq.jpg);
display: block;
width: 77px;
height: 67px;
text-indent: -999999px;
overflow: hidden;
}
li.faq a:hover {
background-color:#000001;
background: url(images/navigation/faq.jpg);
background-position:
-77px 0;
}
li.faqdown a {
background-color:#000002;
background: url(images/navigation/faq.jpg);
display: block;
width: 77px;
height: 67px;
text-indent: -999999px;
overflow: hidden;
background-position:-77px 0;
}
li.contactus a {
background-color:#000000;
background: url(images/navigation/contactus.jpg);
display: block;
width: 77px;
height: 67px;
text-indent: -999999px;
overflow: hidden;
}
li.contactus a:hover {
background-color:#000001;
background: url(images/navigation/contactus.jpg);
background-position:
-77px 0;
}
li.contactusdown a {
background-color:#000002;
background: url(images/navigation/contactus.jpg);
display: block;
width: 77px;
height: 67px;
text-indent: -999999px;
overflow: hidden;
background-position:-77px 0;
}
-->
</style>
</head>
<body>
<div id="container">
<div id="top"></div><!--end top-->
<div id="content-container">
<div id="content"><!--START ENTERING CONTENT HERE-->
<div id="logo"></div>
<div id="navtabs">
<ul id ="nav">
<li class="whoweare"><a href="whoweare">WHO WE ARE</a></li>
<li class="whatwedo"><a href="whatwedo">WHAT WE DO</a></li>
<li class="beforeyoucome"><a href="beforeyoucome">BEFORE YOU COME</a></li>
<li class="onceyourehere"><a href="onceyourehere">ONCE YOU'RE HERE</a></li>
<li class="faq"><a href="faq">FAQ</a></li>
<li class="contactus"><a href="contactus">CONTACT US</a></li> </ul></div><!--end navigation-->
<div id="wrap">
<div id="controller" class="hidden">
<span class="jFlowControl">Current Series</span>
<span class="jFlowControl">We're Social</span>
<span class="jFlowControl">Compassion</span>
</div>
<div id="prevNext" class="hidden">
<img src="images/prev.png" alt="Previous Tab" class="jFlowPrev" align="left"/>
<img src="images/next.png" alt="Next Tab" class="jFlowNext" align="right"/>
</div>
<div id="slides">
<div><img class="cushycms" src="images/currentseries.jpg" height="289" alt="Current Series Graphic" width="462" /><p class="slideshow">Current Series</p></div>
<div><a href="social"><img src="images/weresocial.jpg" alt="We're Social" usemap="#social" border="0"></a>
<map name="social"><area shape="rect" coords="21,86,232,258" href="http://www.facebook.com/group.php?gid=8981012794&ref=ts" />
<area shape="rect" coords="252,97,426,271" href="http://twitter.com/deepwaterchurch" /></map>
</div>
<div><img src="images/luv.jpg" alt="show a little luv" class="cushycms"/></div>
</div>
</div>
<div id="overlay" style="z-index:3; position:relative; top:-209px; left:10px; width:462px; height:289px;"><img src="images/slideoverlay.png" /></div>
<!-- end slideshow -->
<div id="tagline" style="position:relative; top:-390px; left:492px;"><img src="images/tagline.jpg" /></div>
CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />
</div><!--end content-->
<div id="bottom"></div><!--end bottom-->
</div><!--end content-container-->
<div class="clear"></div><!--end clearing div-->
</div><!--end container-->
I am working on a registration page... I am some what new but I am confused b/c this is the source page for the registration but there is no form per se in the html that I can see (or even any content). I am supposed to do some PHP but I'm not sure how to have the form interact with PHP when again there is no form... (unfortunately, I don't think if I can actually show the page since it's not published yet but it has all the fields of form and again this is the source page behind it)... can someone clue me in on this??? <title>Registration</title> <link rel="stylesheet" type="text/css" href="shared.css" /> <link rel="stylesheet" type="text/css" href="registration.css" /> </head> <body> <div id="background"> <div id="shape1"></div> <div id="header"></div> <div id="ds"></div> <div id="home"><a href="index.html" ></a></div> <div id="pby"></div> <div id="id303"><a href="id303.html" ></a></div> <div id="layer3"></div> <div id="layer22"></div> <div id="layer1C"></div> <div id="regOnce"></div> <div id="register"></div> <div id="ty"></div> <div id="x"></div> <div id="p"></div> <div id="register"><a href="register.html" ></a></div> <div id="tour"><a href="tour.html"></a></div> <div id="sched"><a href="sched.html"> </a></div> <div id="yz"><a href="yz.html" ></a></div> <div id="sponsors"><a href="sponsors.html"></a></div> <div id="follow"><a href="follow.html" ></a></div> <div id="layer5"></div> Thank you! - For some reason the content to the right of the vertical line does not all stay to the right, and the border does not go all the way down. A quick glance at the code will demonstrate what I'm trying to accomplish. Please help, I do not understand what I'm doing wrong here. CSS: Code:
/*
Please define the rules of CSS. What takes precedence, inheritance and how specific to define something + shortcuts.
Define what a parent ellement is.
Define float property.
*/
div.container
{
width: 100%;
margin: 0px;
padding: 0px;
border: 1px solid black;
border-top: 0px;
}
h1
{
font-family: verdana;
font-size: 1.5em;
font-style: bold;
margin: 0px;
padding: 0px;
}
h2
{
font-family: verdana;
font-size: 1.1em;
font-style: bold;
margin: 0px;
padding: 0px;
}
h2.center
{
text-align: center;
}
h3
{
font-family: verdana;
font-size: .8em;
font-style: bold;
}
div.header, div.footer
{
background-color: black;
color: white;
}
div.left_aircraft_index
{
width:25%;
float: left;
margin: 0;
padding: 0;
border-right: 1px solid black;
}
div.search_content
{
width: 75%;
color: black;
font-style: normal;
font-family: verdana;
margin: 0;
padding: 0;
}
HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Aircraft Database v1.0 - A complete database of known aircraft.</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div class="container"> <div class="header"><h1>UASO :: Aircraft Database</h1></div> <div class="left_aircraft_index"><h2 class="center">Aircraft Index</h2></div> <div class="search_content"><h2 class="center">Search For Aircraft</h2> <p> <form action="searchDatabase.php" method="post"> The search interface will go here. </form> </p> </div> </div> </body> </html> Apologies if this is in the wrong section guys but it's a combo of CSS, JS and HTML. On my site I want to have a thumbnail (horizontal) scroller, which when clicked on a thumbnail uses the Lightbox style script to open an image. I'd prefer that over a block of say 20 thumbnails to call upon. However, I'm totally stumped of how to do this. Hello, First off, if you know of a way to make round cornered boxes (that stretch hor and vert) in css using less than 6 divs, please be my guest. Now the problem I'm having is IE specific, when i load up the IE DOM inspector, i see that all the divs before the bottomleft div have a height that too big. i don't know what this could be from because i never set a height attribute for any of the divs. http://72.29.74.19/~majdkgf/tangerine/ NOTE: this doesn't happen to the last box Hey, This site looks fine in all the sane browsers, but IE totally screws it up, nothing is where it belongs. Anyone mind having a look and seeing what might be causing this? Very much appreciated. http://www.sansommedia.com/test/todd.html Thanks Hi, I have some code that looks like this . #nav,#nav ul which puts all the listed elements in a vertical list. Now if I do ths #nav ul.. this changes all the elemnts to a horizontal list. What does the ',' do for the id css tags exactly as i thought it refered to nested <ul> lists but is doesn't. I've used css to change my alt tag text to be consistent in size and font to the rest of the site, however, a couple of my images are relatively thin, but are tall. It seems that the alt tags get centered to the image, so you only see the middle of the tag, not the beginning and the end. Is there a way to wrap the text within the confines of the image. Thanks. Hello. My page looks fine in IE7 & FireFox, but in IE6 there's a big white gap on the page. Here's screenshots of how it should look (in IE7 & FireFox) and then how it shouldn't look (in IE6), and then below it is a description of the CSS code I'm using. Any help would be greatly appreciated. Thanks!!! IE7/FireFox: IE6: That whole category on the right that has the "Business Management" heading and the table is in a div with the ID "main" like this: Code: #main {
float: right;
width: 535px;
margin: 8px;
}
Then the navigation bar on the left side is in a div with the ID "sidebar" like this: Code: #sidebar p {
margin: 15px;
}
Both the "sidebar" and "main" divs are in a div with the ID "container" like this: Code: #container {
width: 698px;
border: 4px double #095AA6;
background-color: #FFF;
text-align: center;
margin: 0 auto;
}
Now, here's kind of another problem. At the top of the page (also within the "container" div) are two more divs with the IDs "header" and "nav". Here's those codes: Code: #header {
padding: 0;
margin: 0;
width: 100%;
height: 55px;
background: url(../images/header.jpg) no-repeat;
color: #FFF;
}
#nav {
padding: 0;
margin: 0;
height: 17px;
border-width: 5px 0 5px 0;
border-color: #FFCC00;
border-style: solid;
background-color: #9CBCDA;
color: #330066;
}
Now, I tried decreasing the "width" attribute in the "main" ID from 535 to 525, and that cleared up the big white gap, but then it left a white gap on the top-right (next to the "header" and "nav"). This is only (again) in IE6, and can be seen in this screenshot: Any ideas anyone??? Thanks!!! Hello! Can anyone help me with this one... I'm trying to figure out how to change the following css/html (or if it's even possible) so it still works after removing the surrounding <span> tag. (There is additional javascript which shows/hides the div but I've removed it so it's simpler to read). So the current html below would be shortened to: Code: <a href="javascript:void(0);" class="sddm"><u>Settings</u> <div id="m1" class="alignl"> <a href="#">HTML Drop Down</a> <a href="#">DHTML Menu</a> <a href="#">JavaScript DropDown</a> <a href="#">Cascading Menu</a> <a href="#">CSS Horizontal Menu</a> </div> </a> ORIGINAL CSS/HTML: Code: <style type="text/css">
/* Drop Down Menu */
span.sddm {
z-index: 30;
white-space: nowrap;
position: relative;
}
span.sddm a {
text-decoration: none;
}
span.sddm a:hover {
text-decoration: none;
color: blue;
}
span.sddm div {
position: absolute;
display: none;
margin: 0;
padding: 0;
background: #fff;
border: 1px solid #3366cc;
border-top: 1px solid #c9d7f1;
border-left: 1px solid #c9d7f1;
top: 18px;
}
span.sddm div a {
position: relative;
display: block;
margin: 0px;
padding: 2px 5px;
width: auto;
text-align: left;
text-decoration: none;
white-space: nowrap;
}
span.sddm div a:hover {
background: #3366cc;
color: #fff;
}
span.sddm .alignl {
left: 0px;
}
span.sddm .alignr {
right: 3px;
}
</style>
<span class="sddm">
<a href="javascript:void(0);"><u>Settings</u> <small>▼</small></a>
<div id="m1" class="alignl">
<a href="#">HTML Drop Down</a>
<a href="#">DHTML Menu</a>
<a href="#">JavaScript DropDown</a>
<a href="#">Cascading Menu</a>
<a href="#">CSS Horizontal Menu</a>
</div>
</span>
Hello, I've been messin with this all night but just can't get the result i'm after. The bit of code which follows, almost works - except the fields on the right hand side don't align to the top (to be in line with the top of each text on the left). What am I doing wrong? Can anyone please help me? Thanks, JT EDIT: Screenshot of the current output is attached too for information 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test Document</title>
<style type="text/css">
div.configset label {
font-weight: bold;
}
div.configset fieldset {
background-color:#FFE391;
border:1px solid;
margin:0.5em 0.5em 0.5em 0.5em;
}
div.configset dl {
font-size: 0.85em;
width:100%;
}
div.configset dt {
float:left;
border-right: 1px solid #FFCC6F;
width:45%;
padding:0.5em 0.5em 0.5em 0.5em;
}
div.configset dd {
clear:both;
margin: 0 0 0 46%;
padding:0.5em 0.5em 0.5em 0.5em;
}
</style>
</head>
<body>
<form id="form1" method="post" action="">
<div class="configset">
<fieldset>
<legend>General Options</legend>
<dl>
<dt>
<label for="conf_13">Website Enabled</label><br /><span>Toggle the website on and off. Note that no part of the website (except admin functions) will work if this is set to False.</span>
</dt>
<dd>
<input type="checkbox" name="conf_13" id="conf_13" checked="checked" tabindex="1" />
</dd>
</dl>
<dl>
<dt>
<label for="conf_1">Website Name</label><br /><span>Name of the website. Appears in title of browser and some links</span>
</dt>
<dd>
<input type="text" name="conf_1" id="conf_1" size="40" maxlength="50" tabindex="2" value="Kinetic" />
</dd>
</dl>
</fieldset>
<fieldset>
<legend>Login Options</legend>
<dl>
<dt>
<label for="conf_7">Login Attempts</label><br /><span>Amount of login attempts before time delays start occurring to prevent forced access</span>
</dt>
<dd>
<input type="text" name="conf_7" id="conf_7" size="2" maxlength="2" tabindex="6" value="3" />
</dd>
</dl>
<dl>
<dt>
<label for="conf_8">Login Failure Delay</label><br /><span>Amount of time (in minutes) to delay a member from logging in with the failed account details</span>
</dt>
<dd>
<input type="text" name="conf_8" id="conf_8" size="2" maxlength="2" tabindex="7" value="5" />
</dd>
</dl>
</fieldset>
</div>
</form>
</body>
</html>
Hi, i have to display a list of links horizontally, wrapped in a <ul> tag. For seo reasons now these links have to be wrapped in <h2> tags. In IE6 + IE7 this causes a linebreak and the links are displayed in a vertical list. sth like #myId LI { display:inline-block; } #myId LI H2{ display:inline-block; } solves the problem for Firefox but not for IEs. Do you know a solution? Would be highly appreciated! here the html <ul id='myId'> <li><h2><a htref=...>somewhere</a></h2></li> <li><h2><a htref=...>somewhere</a></h2></li> </ul> OK Found out a float:left in the li was missing This must be a common problem but I have no way to look it up in the forum. In Firefox and IE7 you can define CSS for successive tags with the larger sign: div>span { ... } Does anyone know of anything similar for IE6 ? |
|||||||