|
CSS - Height / Padding Issue
Hi,
Im trying to make a simple bar with text in the center. Im having a lot of problems with it however, because its height is 50px not 25px. The bars in question are the ones that say "Description, Payment" etc I started by setting its height to 25px in the CSS but this didnt work. Ive tried adding padding: 0px to what I thought was the relevant tag, but this doesnt change it either! This is the address to the test page: http://www.zombiemod.com/test.html This is the code: 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>
<meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Testing</title>
<style type="text/css">
/*<![CDATA[*/
#title {
border-top:2px #000000 solid;
border-bottom:3px #000000 solid;
}
#mainNav {
margin: 0px;
padding: 0px;
list-style-image: none;
list-style-type: none;
float: right;
height: 61px;
}
#mainNav li {
float: left;
margin-top: 38px;
margin-right: 10px;
margin-bottom: 0px;
margin-left: 0px;
}
#mainNav li a {
margin: 0px;
background-attachment: scroll;
background-image: url(http://img12.imageshack.us/img12/3157/tabs2d.png);
background-repeat: no-repeat;
background-position: right 0px;
font-weight: normal;
color: #efeeee;
font-family: Verdana;
text-decoration: none;
height: auto;
width: auto;
float: left;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 0px;
}
#mainNav li a:hover {
font-weight: bold;
color: #efeeee;
}
#mainNav li a span {
background-attachment: scroll;
background-image: url(http://img12.imageshack.us/img12/3157/tabs2d.png);
background-repeat: no-repeat;
background-position: 0px 0px;
display: block;
padding-top: 6px;
padding-right: 20px;
padding-bottom: 0px;
padding-left: 30px;
height: 19px;
width: auto;
float: left;
cursor: pointer;
cursor: hand;
margin: 0px;
}
#horinav li {
float:left;
width:23%;
text-align:center;
}
p.c13 {text-align: left}
span.c12 {color: #efeeee}
h3.c11 {color: #000000; font-family: Verdana; text-align: center}
div.c10 {text-align: left}
table.c9 {border-collapse: collapse}
span.c8 {font-family: Verdana; font-size: 80%}
p.c7 {font-family: Verdana; font-size: 80%}
span.c6 {color: #000000; font-family: Verdana; font-size: 14}
p.c5 {text-align: center}
span.c4 {font-family: Arial, Helvetica, sans-serif; font-size: 200%}
tr.c3 {background-image: url(http://img6.imageshack.us/img6/3518/63387888.jpg)}
tr.c14 {background-image: url(http://img6.imageshack.us/img6/2466/bgthin.jpg)}
span.c2 {font-family: Arial, Helvetica, sans-serif; font-size: 120%}
span.c1 {color: #232323}
</style>
<style type="text/css">
/*<![CDATA[*/
img.c7 {padding: 5px; border: 1px solid #ffcc00;}
tr.c6 {background-color: #000033}
td.c5 {background-color: #FFFFFF}
tr.c4 {background-color: #FFFFFF}
li.c3 {list-style: none}
tr.c2 {background-color: #FFEDA3}
span.c1 {color: #EFEEEE}
/*]]>*/
</style>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" id="title">
<tr class="c3">
<td align="left"><span class="c2"><strong><span class="c1"><a name="top" id="top"><img src="http://img200.imageshack.us/img200/9856/alienware.gif" alt="** PLEASE DESCRIBE THIS IMAGE **" /></a></span></strong></span>
<ul id="mainNav">
<li><a href="#Description"><span>Item</span></a></li>
<li><a href="#Payment"><span>Payment</span></a></li>
<li><a href="#Shipping"><span>Shipping</span></a></li>
<li><a href="#Policies"><span>Pictures</span></a></li>
</ul>
</td>
</tr>
</table>
<br />
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr class="c4" valign="top">
<td align="center">
<div class="c10">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="c9">
<tr class="c14 c2">
<td width="100%" colspan="3">
<p class="c5"><strong><span class="c6"><a name="Description" id="Description"><span class="c1">Description</span></a></span></strong></p>
</td>
</tr>
<tr>
<td width="49%" align="left" valign="top">
<p class="c7"><br />
Test.</p>
</td>
<td width="2%" align="right" valign="top"></td>
<td valign="top" width="49%">
<ul>
<li class="c3"><br /></li>
<li><span class="c8">Test</span></li>
<li class="c3"><br /></li>
</ul>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr class="c14 c2">
<td>
<p class="c5"><strong><span class="c6"><a name="Payment" id="Payment"><span class="c1">Payment</span></a></span></strong></p>
</td>
</tr>
<tr class="c6">
<td class="c5" height="2"><br />
<br />
<span class="c8">Test.<br /></span><br />
<br />
<br /></td>
</tr>
<tr class="c14 c2">
<td>
<p class="c5"><strong><span class="c6"><a name="Shipping" id="Shipping"><span class="c12">Shipping</span></a></span></strong></p>
</td>
</tr>
<tr class="c6">
<td class="c5" height="20"><br />
<br />
<span class="c8">Put your Shipping information here.<br />
There are <br> tags here to fill the cell, take them out after inserting you text.</span><br />
<br />
<br /></td>
</tr>
<tr class="c14 c2">
<td>
<p class="c5"><strong><span class="c6"><a name="Policies" id="Policies"><span class="c12">Pictures</span></a></span></strong></p>
</td>
</tr>
<tr class="c6">
<td class="c5" height="20">
<p class="c13"><br />
<br />
<span class="c8"><br /></span></p>
<ul id="horinav">
<li><span class="c8"><img class="c7" src="http://img528.imageshack.us/img528/4149/100nw3.png" alt="** PLEASE DESCRIBE THIS IMAGE **" /></span></li>
<li><span class="c8"><img class="c7" src="http://img528.imageshack.us/img528/4149/100nw3.png" alt="** PLEASE DESCRIBE THIS IMAGE **" /></span></li>
<li><span class="c8"><img class="c7" src="http://img528.imageshack.us/img528/4149/100nw3.png" alt="** PLEASE DESCRIBE THIS IMAGE **" /></span></li>
<li><span class="c8"><img class="c7" src="http://img528.imageshack.us/img528/4149/100nw3.png" alt="** PLEASE DESCRIBE THIS IMAGE **" /></span></li>
</ul>
<br /></td>
</tr>
</table>
</body>
</html>
Ive put it through a validator, now it validates, but it still doesnt work. I believe the tag in question is c14 and c2. Similar TutorialsI'm still fairly new to CSS-only layouts, having always relied on tables heavily until just recently. I'm having a couple of problems that I can't seem to fix by myself. Here is an image of how the layout should look, so you can understand what I'm aiming for: http://squirrel.10pinleague.com/img/layout.jpg. And here is what it currently looks like: http://squirrel.10pinleague.com/. Here is the code that I have so far, they should be fairly clear to follow. Firstly, "index.php": Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <link rel='stylesheet' type='text/css' href='style.css'> <title>Red Squirrel Website!</title> </head> <body> <div id="minHeight"></div><!-- Safari hack --> <div id="outer"> <div id='topspace'> | <a href='#'>Home</a> | <a href='#'>Contact</a> | <a href='#'>Sitemap</a> | </div> <div id='header'> <div class='logo'> </div> <div class='search'> <form method='post' action='index.php'> <input type='text' name='frmSearchText'> <input type='submit' value='Search' name='frmSearch'> </form> </div> <div class='links'> <table width='315' height='25'> <tr> <td width='100' background='img/headerlink.gif'> <a href='#'>Link 1</a> </td> <td width='5'> </td> <td width='100' background='img/headerlink.gif'> <a href='#'>Link 2</a> </td> <td width='5'> </td> <td width='100' background='img/headerlink.gif'> <a href='#'>Link 3</a> </td> <td width='5'> </td> </tr> </table> </div> </div> <div id='mainarea'> <div id='directory'> Directory > Home </div> <div id='leftlinks'> <div class='top'> <div class='10padtop'>Hot Links</div> </div> <div class='main'> <div class='10padleft'> <a href='#'>Link 1</a><br> <a href='#'>Link 2</a><br> <a href='#'>Link 3</a><br> <a href='#'>Link 4</a><br> <a href='#'>Link 5</a> </div> </div> <div class='bottom'> </div> <div class='top1'> <div class='10padtop'>Hot Links</div> </div> <div class='main1'> <div class='10padleft'> <a href='#'>Link 1</a><br> <a href='#'>Link 2</a><br> <a href='#'>Link 3</a><br> <a href='#'>Link 4</a><br> <a href='#'>Link 5</a> </div> </div> <div class='bottom1'> </div> </div> <!-- close "leftlinks" div --> <div id='content'> Hello!<p> </div> <!-- close "content" div --> </div> <!-- close "mainarea" div --> <div id='clearfooter'></div> </div> <!-- close "outer" div --> </div> <!-- close "minHeight" div --> <div id='footer'>Created by Rob Masters 2007 </div> </body> </html> Style.css: Code:
a:link {text-decoration: none; color: #fff; font-weight: bold;}
a:visited {text-decoration: none; color: #fff; font-weight: bold;}
a:active {text-decoration: none; color: #fff; font-weight: bold;}
a:hover {text-decoration: underline; color: #fff; font-weight: bold;}
body { font-family: verdana, arial; background-color: #f0fdee; margin: 0px; }
html,body {margin:0;padding:0}
/* commented backslash hack \*/
html, body{height:100%;}
/* end hack */
#outer{
min-height:100%;
margin-bottom:-22px;
height:auto;
width: 800px;
margin-left: auto;
margin-right: auto;
background-color: #f0fdee;
}
* html #outer{height:100%;}
div#topspace {
position: relative;
width: 800px;
height: 20px;
text-align: right;
font-size: 12px;
}
#topspace a:link {text-decoration: none; color: #000; font-weight: bold;}
#topspace a:visited {text-decoration: none; color: #000; font-weight: bold;}
#topspace a:active {text-decoration: none; color: #000; font-weight: bold;}
#topspace a:hover {text-decoration: underline; color: #000; font-weight: bold;}
div#header {
position: relative;
width: 800px;
height: 100px;
float:left;
vertical-align:top;
border:0;
margin: 0px;
background-color: #7e3b29;
}
#header .logo {
width: 170px;
height: 75px;
background-image: url('img/logo.jpg');
}
#header .search {
position: absolute;
left: 580px;
top: 0px;
width: 220px;
height: 50px;
padding-top: 8px;
color: #fff;
text-align: center;
font-size: 12px;
}
#header .links {
margin-left: 485px;
margin-top: 75px;
width: 315px;
height: 25px;
color: #fff;
text-align: center;
font-size: 12px;
}
div#mainarea {
position: relative;
margin-top: 5px;
height: 100%;
}
#mainarea .leftlinks {
position: absolute;
left: 0px;
top: 0px;
width: 175px;
height: 100%;
float: left;
}
div#directory {
position: absolute;
left: 175px;
top: 0px;
width: 625px;
height: 20px;
background-color: #5ca354;
}
div#content {
position: absolute;
left: 175px;
top: 20px;
width: 625px;
height: 100%;
background-color: #fff;
margin-top: 1px;
}
#leftlinks .top {
width: 170px;
height: 40px;
background-image: url('img/leftlinks_top.jpg');
text-align: center;
color: #fff;
font-weight: bold;
}
#leftlinks .main {
width: 170px;
min-height: 80px;
background-image: url('img/leftlinks_bg.jpg');
}
#leftlinks .bottom {
width: 170px;
height: 18px;
background-image: url('img/leftlinks_bottom.jpg');
}
#leftlinks .top1 {
width: 170px;
height: 40px;
padding-top: 5px;
background-image: url('img/leftlinks_top.jpg');
text-align: center;
color: #fff;
font-weight: bold;
}
#leftlinks .main1 {
width: 170px;
min-height: 80px;
padding-left: 10px;
background-image: url('img/leftlinks_bg.jpg');
}
#leftlinks .bottom1 {
width: 170px;
height: 18px;
background-image: url('img/leftlinks_bottom.jpg');
}
#10padtop { padding-top: 10px; }
#10padleft { padding-left: 10px; }
#footer {
clear:both;
height:20px;
width: 800px;
margin-left: auto;
margin-right: auto;
color: #000;
border-top: 2px solid #7e3b29;
font-size: small;
font-variant: small-caps;
font-style: italic;
text-align: right;
}
#clearfooter {
clear: both;
height: 22px;
}
div>p {margin:0}
html>body #minHeight{float:left;width:0px;height:100%;margin-bottom:-22px;} /*safari wrapper */
table { border-collapse: collapse; border-spacing: 0; }
td, th { padding: 0; }
td.padded { padding: 5px; }
td.lmargin10 { margin-left: 10px; }
As you can see at the url for the page I'm working on, the main content section with the white background does not stretch the 100% height to where the footer is. I'm sure this problem is to do with the div that the content div is nested within, called 'mainarea'. This is because the content div does indeed stretch to the 100% height of 'mainarea', but mainarea does not stretch all the way to the footer despite me adding the "height: 100%;" attribute. How can I fix this? Another problem is regarding padding. For some reason when I give a div a padding attribute, it changes the size of the div as well! I have illustrated this problem by using padding only on the 2nd "Hot Links" section on the left. I need to use padding to get the text in the correct position but as you can see, this padding is causing each div to expand, which in turn means that the background images do not appear as they should. What can I do to fix this as well? Thanks a lot for any help regarding either of these issues! I have been struggling with this problem since i first started creating this layout (ages ago, but for development reasons, i stuck static width/heights in, just to work on my screen). I have searched google numerous times, but with no avail, as sites go on about something which is irrelevant to what im wanting (so maybe vague/bad use of keywords in search). any way i did a quick search on here, and any help given, does not seem to fix up my layout. My first basic problem is having a side navigation bar to fill the height of the screen, plus the header which is a static height. All this without creating scroll bars for the browser My second problem, which may be more or less the same as the above (miss-understanding of css), having a 100% height which includes padding. Link: http://dlym.net/testing/css_help.php Source (html) Code: <html> <body> <div id="container"> <div id="top">header</div> <div id="sidebar">laaa<br>laaa<br>laaa<br>laaa<br>laaa<br>laaa<br>laaa<br>laaa<br>laaa<br>laaa<br>laaa<br>laaa<br>laaa<br>laaa<br></div> <div id="content"> <div id="childcontainer"> <div id="paddedbox"> <div id="test1">title</div> <div id="test2"> <div id="myElement"><a onclick="">main content</a></div> </div> </div> </div> </div> </div> </div> </body></html> CSS Code:
html, body
{
margin:0px;
padding:0px;
width:100%;
height:100%;
}
#container
{
width: 100%;
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
max-height:100%; /* real browsers */
background-color:grey;
position: relative;
}
#top
{
width: 100%;
height: 100px;
background-color:pink;
}
#main
{
width:100%;
height:100%;
}
#sidebar
{
background-color:red;
width: 150px;
height: 100%;
float: left;
}
#content
{
background-color:blue;
overflow:hidden;
padding:10px;
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
max-height:100%; /* real browsers */
}
#childcontainer
{
background-color:white;
padding:10px;
}
#paddedbox
{
background-color:green;
margin-bottom:0px;
margin-top:0px;
overflow:hidden;
}
#test1
{
width:100%;
height:20px;
background-color:yellow;
}
#test2
{
width:100%;
height:100%;
background-color:lime;
}
The above is a simplified version of my site's layout, but they are the core div containers which i am trying to get positioned correctly. I seriously will thank any one who gives any help which leads me to fix this problem, as i am not too skilled with css, and this has been troubling me for some time. Thank you Hey all... I'm doing some testing in Firefox, and I've encountered a problem. Code: <div style="background-color: #FF9801; height: 33px; width: 99px; text-align: center; display: inline; padding-top: 8px;">Help</div> My intention here is to create a box that is 99px high, 33px wide, and with the text in the middle. In IE6, this appears to be fine. However, when testing it out in FF, I don't get the spacing that I want. Here's the kicker: When I add the float element, (float: left), it comes out the way I want it to. But it does seem to add a bit of whitespace above and to the left of it. I don't want the whitespace! Can anyone help with a compromise that will work in both browsers? My CSS usage has been pretty light until up to this issue. Thanks in advance! So I'm working on a new css-based design for my site and everything looks great.. until I open it in IE. I'm using rounded corners in 2 div boxes placed both on the top and bottom of my <div> body, they are both positioned correctly. The rounded images are used as background images in the <div>'s and not as an <img>. Problem #1: There is either a margin or padding that is separating the first and second <div> containers that make up the top and bottom rounded corners. I've tried *{margin..padding:0} to eliminate it from all elements (to no avail). Problem #2: I've set each <div> container used for the rounded corners to 12x12px, because that is the size of the image (rounded corner image). For some reason, in IE both containers are bigger than 12px in height, no idea why this is. In Firefox everything is working as it should, anyway here is the.. HTML: Code: <html> <head> <title>P_TITLE</title> <link href="skin.css" rel="stylesheet" type="text/css"> </head> <body> <div id="tlcorner"></div><div id="trcorner"></div> <div id="divbody"> <div style="float:left;width:75%"><div id="logindiv"></div><br><div id="searchdiv"></div></div><div id="logo">logo..</div> </div> <div id="blcorner"></div><div id="brcorner"></div> </body> </html> CSS: Code: html {
height: 100%;
margin: 0px;
padding: 0px;
}
body {
background-color: #CFCFCF;
margin: 3px;
padding: 0;
}
#logindiv {
background-color: #FFF000;
float: left;
width: 100%;
height: 120px;
}
#searchdiv {
background-color: orange;
float: left;
width: 100%;
height: 35px;
}
#logo {
background-color: #000000;
float: right;
width: 155px;
height: 155px;
}
#divbody {
background-color: #FFFAF0;
height: 700px;
padding-left: 12px;
padding-right: 12px;
}
#tlcorner {
background-color: #FFFAF0;
background-image: url(images/tl_corner.gif);
background-repeat: no-repeat;
background-position: top left;
float:left;
width: 12px;
height: 12px;
margin:0px;
}
#trcorner {
background-color: #FFFAF0;
background-image:url(images/tr_corner.gif);
background-repeat: no-repeat;
background-position: top right;
height:12px;
}
#blcorner {
background-color: #FFFAF0;
background-image: url(images/bl_corner.gif);
background-repeat: no-repeat;
background-position: bottom left;
float:left;
width: 12px;
height: 12px;
}
#brcorner {
background-color: #FF0000;
background-image:url(images/br_corner.gif);
background-repeat: no-repeat;
background-position: bottom right;
height: 12px;
}
I'm sure if you use any image that is 12x12 you should see the same problems I am getting. Notice the padding or margin on the top left <div> element, and the incorrect height for both. Thank you very much for any suggestions. Hi all, My CSS for a <DIV> is: Code:
.title {
width: 350px;
background: #aaccff;
padding: 0px 0px 0px 10px;
border: 1px #cccccc solid;
}
When I enter text in the DIV, it shows a bit to the right of the left border, which is what padding property is supposed to do! The problem is, in Internet Explorer, this "shift" is PERFECT and there is no extension beyond the right border, but in Firefox, the background color can be seen extended 10px to the right border. I searched on internet and people called it a problem with I.E. Everywhere I visited, people seemed to curse a Microsoft product and give a line of code, "DOCTYPE" etc to force I.E. to change mode and behave like Firefox. Those guys dont understand that what the coder wants is a solution so that Firefox shows the DIV exactly like I.E. 1) So please! Stop cursing I.E. and give solution as to how to modify the code...! 2) A person said that the width is calculated as: width + padding + margin. In my case, since margin is "0", the suggession seemed to use the following code: Code:
.title {
width: 340px;
background: #aaccff;
padding: 0px 0px 0px 10px;
border: 1px #cccccc solid;
}
i.e., subtracting the padding-left from width. But that makes "no sense" because if we do the above, it should do nothing but to just change the width of the DIV, and so the end result would be that in Firefox, instead of spanning to 360 px horizontally, this would cause it to span in 350px horizontally. Keeping in view that its the "only" DIV on the page, setting the width parameter should not be a problem. 3) Now, if Firefox follows standard, then how will firefox ever show the padding property correctly if the above scenario is considered...! 4) Microsoft may not follow the standards sometimes, but the result "is" userfriendly most of the times...! Thanks! just read a post on ALA regarding how to create a simple thumbnail gallery using CSS. while the styling of the CSS provided on ALA seems to render the same on both FF and IE, the original code renders slightly different. everything seems to work fine except for the padding around the caption, underneath the image. there is more space around then caption when viewed in IE. please look at this link where the html file and css are hosted - (view source) can you make out anything that could be adjusted to fix this tiny bug? really appreciate if you could help out a little here. been at this for the last couple of days, and now really dead with any ideas to fix this tiny issue :-/ thanx for your time, z Hi all, I've been reading this forum for a while now, but never had to post anything before. I've hit a snag whilst working on my new personal site. Its all fine in Firefox, I'm using a Wordpress engine to spit out 'posts' which are actually folio items, however IE, after the first one, the second one and every one after that have some extreme margin/padding issue so that the content area is only maybe 20px wide. www dot lucas-starbuck dot com forwardslash design is the site address, any ideas would be much appreciated! Thanks, Lucas I'm building a series of navigation links in boxes on top of each other. I want to pad the links inside their div tags 3 pixels all the way around. I'm seperating the boxes using the border property, 1px solid on the bottom of each cell. The top and the bottom are handled in a seperate class. In firefox, the brower adds the 3 pixels to the overall width (maybe six since I'm padding left/right) so the page comes out like this: --------- | Link 1 | ------------- | Link 2 | ------------- | Link 3 | ------------- Now in IE, it looks correctly. I'm not sure which one is correct, but since IE looks right I assume it's correct. Any way to get the padding to be handled consistently in 2 browsers? Take a look at http://actrucking.com/. I just added the orange link towards the middle of the page that says "Get a FREE Online Quote Now!!" I'd like to push it down a bit so it is more centered in the blue area, but I can't seem to get the text to acknowledge margin or padding? Here are what the styles look like: Code: #tlCallBox { background:#336799; height:75px; display:block; float:left; width:868px; margin-left:10px; position:relative; margin-bottom:30px}
#tlCallBox h2{ color:white; font-size:19px; margin: 15px 0 0 30px}
#tlCallBox p { color:White; margin-left:32px}
#tlCallBox b { margin:20px 0 0 120px; font-weight:bold; font-size:20pt}
Hi there, I am in the process of making a website to purchase tickets for Cannon and Ball's show in Morecambe, and I've tried to make it as standards compliant and usable as possible. I've made a nav bar using a UL tag. This works fine in opera and mozilla, but the hover effect doesn't kick in in IE until you are actually on the text. I've tried using the IE7 patch and that helps none. Can anyone tell me what I'm doing wrong? The site is: http://cannonandball.1stmorecambe.net/ Style sheet: http://cannonandball.1stmorecambe.net/style.css On the sidebar of this page http://www.laurieannre.com/real-estate-agent.asp the UL titled Neighborhoods has a different padding on FF than in IE and I can not understand why? Please look at the main navigation on this site www.downtowntransmission.com I have it exactly how I want it in IE7 but it is a bit off in FF. Mouseover the Contact link and Gallery Link and you will see what I mean. Is there some small adjustment I can make to make it look the same in both? As a side note, do you like the site? T Remove. Hello, I am having an alignment issue that I can't seem to fix. The site is accessed he http://cbo4edu.org/newSite/index.html I've used 2 different CSS files... one for the homepage and one for all the other pages . For the homepage, I want the Mission headline to just touch the blue border from the navigation. Right now when viewed in Firefox on my Mac there is an extra white box above it with nothing in it... but in IE it looks fine. How do I get it to look the same in both browsers? For the other pages, I'm having a similar issue. I want about the same amount of white space above the main headings without the words getting cut off. How can I fix this in both browsers? Thank you in advance. I have a menu structure that I am trying to create with CSS. The features I want are the following:
Variable width elements
Resizable text from user
Image at left of link
I have an example page up he URL I've got it working with a table, but when I've tried with a unordered list, I start having problems. Here's what is happenning: Firefox -- when I put padding on my anchor tags, the anchor elements expand outside of the list item elements. Firefox -- anchor elements don't expand to the full width of the list item element. Internet Explorer -- IE seems to only allow for fixed/percentage with list item elements. Is there a way to allow for variable width elements? Thanks for the help! -- Doug Hey, In the top menu For some reason I can't seem to pick (after frying my brain working on this for the past however many hours) why there is such a huge empty space above the menu. I'm sure it's something simple I just keep missing. Also having trouble positioning the other menu without bloating up the css with potentially useless code. (-px, etc). Website style.css menu2.css (says menu two, but is just the second attempt at css for the first menu) Cheers for all help! Hey I have a containing div with 4 inner spans that are set to be displayed like a block element (display:block and floated to the left. Now I want every span in the containing div to be the same height as the first span in the containing div. So if the first span in the containing div spreads to 30 pixels in height, I want the other three spans to do the same. Is there a way I can do this? Here is what the code kinda looks like: Code:
<style>
#c {
min-height:18px;
height:18px;
}
#c span {
color: #fff;
display:block;
float:left;
}
</style>
<div id="c">
<span class="s">blah</span>
<span class="s">blah</span>
<span class="s">blah</span>
<span class="s">blah</span>
</div>
Thanks Please look at this page - http://www.nationwidetranny.com/testimonials.asp The issue is obvious, the image(s) in div.testimonial go outside the div when what i want is that the div expands. The image is floated, might that be part of the issue. Any help would be appreicated so much. Thanks. Code:
div.testimonial{
position:relative;
width:667px;
min-height:200px;
padding:20px 0 30px 0;
background: transparent url(../images/testimonial_div_bg.gif) repeat-y;
font-style:oblique;
}
.testimonial_footer_bg{
position:absolute;bottom:0;left:-1px;clear:left;background: transparent url(../images/testimonial_div_footer.gif) no-repeat;width:667px;height:16px;
}
div.testimonial div.picture{
float:left;
margin:3px 13px 0 17px;
}
div.testimonial p{
margin:0 0 0 320px !important;
width:320px;
padding:0 !important;
}
div.testimonial p.nopic3{
margin:0 0 0 17px !important;
width:600px;
}
Hi guys, I am not sure if any of you have experience this issue. The layout of my page from top to bottom is header (always stays at the top of browser) content footer (always stays at the bottom) the page looks perfect under ie7 firefox and ie6 if at full screen mode. but when i smaller the browser ie6 footer covers up my content which means i can't scroll right to the bottom of my content. the footer seems overlapping the content. any suggestion about how to fix this problem? |
|||||||