|
CSS - Can't Figure Out Why Content Is Spaced Down
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-->
Similar TutorialsI 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! I have a menu within my content thus: Code: div class="contentMenu"> <ul> <li> <a href="#" title="Find out more"><img src="images/stories/memories/FamilyLife/thumb/familyFWHarveysBuildingsDorchester.jpg" alt="" /> <span>Family life</span></a> </li> . . . <li> <a href="#" title="Find out more"><img src="images/stories/memories/SightsAndSounds/thumb/sightsMOOsmington1963.jpg" alt="" /> <span>Sights/Sounds</span></a> </li> </ul> </div> I want the menu items not to spill onto the next line when I shrink the browser. I have tried overflow:hidden; but does not stop the last one taking up a new "line". There are 7 menu items across the page. The CSS so far is: Code: .contentMenu {
background-color:#FFFFCC;
border:1px solid #B9C0F7;
margin-bottom:6px;
padding:8px 0 5px;
}
#main .contentMenu ul, #main2 .contentMenu ul {
margin:0 auto;
overflow:hidden;
width:95%;
}
#main ul, #main2 ul {
list-style-position:outside;
list-style-type:square;
margin:0 0 0 20px;
padding:10px 0;
}
#main ul li, #main2 ul li {
margin:0;
padding:0 0 0 10px;
}
.contentMenu li {
float:left;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
text-align:center;
width:15%;
}
.contentMenu a {
padding-top:4px;
text-decoration:none;
}
.contentMenu img {
border:medium none;
height:62px;
width:55px;
}
Of course the meni images need to be evenly spaced across the page. Would appreciate if someone could point me in the right direction. 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) 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?) ...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 - 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> I 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>
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! Hi there, I have a content glider script, but I have added it to a wrapper with a background image. The css is using a white background colour so when a new layer is glided up, it covers the one underneath it. However, I want the background to be transparent to show the background image underneath.... If I remove the white background, they layers become transparent and overlay each other, so you can see all text in the layers on top of each other making it impossible to read. Is there anyway I can make it so it has a transparent background, but so it will not show the content under the new slide? This is my CSS: PHP Code: .glidecontentwrapper{ position: relative; /* Do not change this value */ height: 230px; /* Set height to be able to contain height of largest content shown*/ overflow: hidden; } /* Total wrapper width: 350px+5px+5px=360px Or width of wrapper div itself plus any left and right CSS border and padding Adjust related containers below according to comments */ .glidecontent{ /*style for each glide content DIV within wrapper.*/ position: absolute; /* Do not change this value */ background: white; visibility: hidden; width: 330px; } /* Total glidecontent width: 330px+10px+10px=350px Or width of wrapper div itself (not counting wrapper border/padding) */ .glidecontenttoggler{ /*style for DIV used to contain toggler links. */ width: 360px; margin-top: 6px; text-align: center; /*How to align pagination links: "left", "center", or "right" background: white; /*always declare an explicit background color for fade effect to properly render in IE*/ } Any help would be great! Thanks. 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 Well I managed to find a partial solution by adding "clear" to the "statusDiv" like so: Code:
.statusDiv {
clear: both
background-image: url(../png/disclosure_triangles/blue_block.png);
height: 20px;
margin-bottom: 1px;
}
This kicks sibling divs onto their own line (which is what I wanted) but the spacing between divs is 2 pixels and I can't seem to find any combination of padding, margins etc to get the spacing down to one pixel. Does anyone know of a way to control the inter-div spacing when "clear" is defined? Thanks Ken --------------------------------------------------------------- Original post --------------------------------------------------------------- I'm trying to make a few divs to create the same basic functionality as an outline (with disclosure triangles etc...) and am having alignment problems. The first row renders perfectly but the text of subsequent rows overlaps the text of first row. Here's the html: Code: <div id="contentBlock" class="bodyText"> <div class='statusDiv'> <div class='disclosureCollapsed'></div> <div class="disclosureDivLabel">New</div> </div> <div class='statusDiv'> <div class='disclosureCollapsed'></div> <div class="disclosureDivLabel">Open</div> </div> </div> And here's the CSS: Code:
#contentBlock {
position: absolute;
top: 130px;
left: 200px;
height: 101%; /* Hack to force vertical scroll bars */
right: 280px;
min-width: 400px;
visibility: visible;
display: block;
}
.statusDiv {
clear: both
background-image: url(../png/disclosure_triangles/blue_block.png);
height: 20px;
margin-bottom: 1px;
}
.disclosureCollapsed {
background-image: url(../png/disclosure_triangles/blue_collapsed_wide.png);
display: block;
text-align: right;
/*position: absolute;*/
float: left;
top: 0px;
left: 0px;
width: 18px;
height: 20px;
}
.disclosureCollapsed:hover {
cursor: pointer;
}
How would I make the text in each subsequent row (statusDiv) line up? Thanks for any help Ken http://www.hybridillusions.com/wordpress/?m=200712 Still working on it, but something caught me and I'm clueless. See, I'm still learning Tableless CSS, and well... I'm not sure how to have it so that the content doesn't run over the footer like that. As it should be more like... http://www.hybridillusions.com/wordpress/ For CSS reference, here is where the css file is located: http://www.hybridillusions.com/wordpress/wp-content/themes/simplistic/style.css Thanks in advance! 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!!! Hi, I'm knocking up a new site and I'd like to place the content first in the source code, followed by the nav code etc. The design of the site goes: header -> main content -> footer. The navigation will sit in the header above the main content. all the nav links etc. are text and will be resizable by the user as that is good accessibility practice. This means the header can change height as the font expands. So my question is... I see how I could put the header and nav last in the soiurce code and then position it absolutely, and position the main content etc. under it. but how do I do this when the height of the header can vary if the user alters the text size etc.? any tips ladies and gentlemen? |
|||||||