|
CSS - Another Problem... Left Cell Spacing? Help!
http://www.webpagedesignrus.co.uk/DECS
Look at the text near the picture, I need to space it out a bit but only on the left side... I made the td have the id of "left": Code:
#left {
margin-left: 30px;
}
Code:
#left {
margin-left: 30;
}
I can't get it to work... Similar TutorialsI'm having some problems with CSS. If you look at the pictures below, the first is a screenshot of what it is supposed to look like. It's how it looks in most browsers. The second one, however, is how it looks in IE 6 on Windows and IE 5 on the Mac. It is wrong. Correct look Incorrect look I want to know how to fix this. The little colored boxes are supposed to be squares and have solid borders on them. The shape is off and the borders are missing on the IE version. Also, on the progress bar, there is not supposed to be space between the cells but there is. There is also space between every cell on the page and there is not supposed to be any. Here is my main CSS: Code:
body { background-color: #FFFFFF; }
a { text-decoration: none; font-weight: bold; }
a:link { color: #003366; background-color: transparent; }
a:visited { color: #003300; background-color: transparent; }
a:active { color: #339933; background-color: transparent; }
a:hover { text-decoration: underline; }
table { border: 1px solid black; border-collapse: separate; border-spacing: 0px;}
td, th { border: 0px solid black; padding: 5px; text-align: center; white-space: nowrap; }
tr.one { background-color: #FFFFFF; }
tr.two { background-color: #DDDDDD; }
table.squares { border: 0px; border-spacing: 1px; width: 50px; height: 10px; }
td.square { border: 1px solid grey; padding: 4px; }
td.nopadding { padding: 0px; }
.default { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 10px; color: #000000; }
.h1 { font-size: 200%; font-weight: bold; text-align: center;}
.h2 { font-size: 120%; font-weight: bold; }
.h3 { font-weight: bold; }
.step { font-size: 150%; font-weight: bold; color: #999999; }
Here is one of the sets of squares: Code: <table class="squares">
<tr>
<td class="square" style="background-color: #CCCC66"></td>
<td class="square" style="background-color: #CC9966"></td>
<td class="square" style="background-color: #990000; border: black"><td>
<td class="square" style="background-color: #669966"></td>
<td class="square" style="background-color: #669999"></td>
</tr>
</table>
And finally, here is one of my progress bars: Code: <table style="color: white; width: 100px">
<tr>
<td style="padding:0px; text-align: right; padding-right: 5px; background-color:#222244; width:41px"></td>
<td style="padding:0px; text-align: left; padding-left: 5px; background-color:#666666; width:59px">40.7%</td>
</tr>
</table>
And in case that code is not enough, here is a link to the full HTML. According to this CSS test my CSS is not wrong. So does IE just suck? Is there something I can do to make it work in all browsers? My last question is, should I be using div tags for my boxes and progress bars instead of tables? I couldn't figure out how to make them work with divs so I just went with what I knew. Could someone give me an example of each using divs so I can learn how to make it work? Hey there. im working on a website project and want to remove the cellspacings.... Im working with mm dreamweaver and got this code from the reference which is buildin: "cell-spacing" but its not working... any ideas? I am trying to space out my menu from the primary container. right now its completely on the left i am want to give it a 4 pixel space but I am relevantly new to css/html cant figure it out. This is what i have for the menu. Code: .twoColHybLtHdr #sidebar1
{ float: left ;
width: 12em;
background: #000000;
padding: 15px 0;
border: 1px solid #ffffff; }
Thanks In Advance Hello - I am attempting to create a table of values that will have a relative style sheet that will contain a circle background image and number relative to said value. The numbers are only being added for during the creation of requirements to reference the values. The current procedure is to create the HTML, then take a screenshot of it, and manually in a photo editor (or visio) to go in and add the numbers. (So, if we have to add another value, I have to go back in and manually update the numbers and shift everything around). I figure this would be a MUCH better way, since I can just change the visibility on the style sheet and 'poof' the numbers are all gone :-), and when I need to do a screen shot, 'wham' their back again :-D. Here is an example of what I ideally want to achieve (created w/ Visio): Ideal Table Look However, here is what I am currently experiancing Here's the style sheet that I'm using Code:
<style type="text/css">
div.number { visibility:visble;
position: relative;
width: 20px;
height: 20px;
z-index: 2;
left: 5px;
bottom: 35px;
text-align: center;
text-vertical-align: center;
font-family: arial;
font-size: 8pt;
background-image: url(circle.gif);
background-repeat: no-repeat;
background-position:0px -1px
background:none;
border-style:none;
border-width:none;
}
</style>
- All of the number/circles are shifted (which isn't a major problem I can probably solve the location issue myself), but the more important item that's giving me problems is the re-formatting of my Table. I would like to have the image/numbers 'hover' outside of the table cells. Any help would be greatly appreciated. Thanks in Advance. Dave the 2 pages below have some general layout css issues, like too much white space above the grey line AND though they both use the same right bar (I uses a PHP include) the format is different in both. The green line is the toughest...it won't extend the height of the page. Any ideas? I attached my style sheet as well. thanks. http://bowtree.org/latest/luminaries.php http://bowtree.org/latest/index.php Hi everyone, I have a problem I'm trying to overcome with displaying an image next to the text in a table cell. I've set the table cell to valign=middle and this achieves the layout I want (hopefully this demonstration will look right..) Code: PICTUREHERE PICTUREHERE PICTUREHERE The text goes here PICTUREHERE PICTUREHERE So the text and the picture are laid out along the middle of the cell. However as soon as the text gets too big for the cell (or the cell gets smaller) this happens: Code: PICTUREHERE PICTUREHERE PICTUREHERE The text goes here, but when it's longer PICTUREHERE PICTUREHERE the remainder comes here I knew this to be because the img is still an inline element in the cell. I tried to solve the problem by making the img float:left, but the following happens, even if the valign=middle property is set in the cell: Code: PICTUREHERE The text goes here, but when it's longer PICTUREHERE the remainder comes here PICTUREHERE PICTUREHERE PICTUREHERE Is it possible to achieve the top layout. If it is can someone help me please (it's probably staring me in the face) Thank you in advance Andy In IE, there is a space between my div's. Can someone help me fix it? Attached is a sample htm and graphics or see he PHP Code: <div id="red" align="center"> <img src="red.gif" width="500" height="100"> </div> <div id="blue" align="center"> <img src="blue.gif" width="500" height="100"> </div> Thanks. I'm stumbling through learning CSS with the help of some great people (here and elsewhere), and I've almost got a complete, working template, but I'm having a problem with (surprise) IE. I'm using nav boxes on the left and the right, and within the nav boxes I'm using unordered lists to define the menu options. In Firefox it works perfectly, in IE it adds an additional space to the bottom of each list item. Does anyone have any clue what's going on? I've tried to define the margins to 0, but that doesn't seem to do anything. http://www.mcconaha.com/css_refined.php http://www.mcconaha.com/css_refined.css Code: <div class="navbox">
<h3>Navigation</h3>
<ul>
<li><a href="#">. News</a></li>
<li><a href="#">. Junk</a></li>
<li><a href="#">. Pics</a></li>
<li><a href="#">. Downloads</a></li>
<li><a href="#">. Links</a></li>
</ul>
</div><!-- end navbox -->
On this page: http://www.poweredpages.com/newtarget/ctia/ there's an spacing problem in IE. Hover over one of the links on the main bar to get the sub link tray. Hover over the first two links in a vertical set, and it will work fine. Hover over the THIRD link, and in that link and any link below it there's extra padding on the top of it. But all these links have the exact same CSS associated with them. Very odd. Works fine in FF. Here's the code and the CSS: Code: <div id="showtray" class="tray" onmouseout="hide('showtray','linkinfo')" onmouseover="show('showtray','linkinfo')">
<div class="traynav">
<ul>
<li><a href="/info/">General Information</a></li>
<li><a href="/info/registration_packages.cfm">Registration Prices & Policies</a></li>
<li><a href="/info/keynote_sessions.cfm">Keynote Sessions</a></li>
<li><a href="/exhibit/">Exhibit Floor</a></li>
<li><a href="/info/ed_sessions.cfm">CTIA Educational Sessions</a></li>
</ul>
</div>
<!-- 5 links to a column ONLY! Any more and start a new column, lke this one -->
<div class="traynav">
<ul>
<li><a href="/info/seminars.cfm">Partner Seminars</a></li>
<li><a href="/info/green.cfm">Green Practices</a></li>
<li><a href="http://www.ctia.org/conventions_events/convinfo/info.cfm">Receive Information</a></li>
<li><a href="/info/international.cfm">International Guests</a></li>
</ul>
</div>
<div class="trayimage whitetext smalltext"><img src="images/show.jpg"><br />Stars of the Show</div>
</div>
Code: .tray{
position:absolute;
z-index:500;
top:30px;
left:0px;
visibility:hidden;
background-image:url(../images/blackback.png);
width:920px;
height:130px;
border-bottom:3px solid #4CADCE;
padding:20px
}
.traynav{
float:left;
padding-right:15px;
}
.traynav ul{
margin: 0px;
list-style-type: none;
padding: 0px;
clear: both;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
border-top: 1px dotted #c2dae2;
}
.traynav ul li{
list-style-type: none;
padding: 0px;
clear: both;
border-bottom: 1px dotted #c2dae2;
font-size:11px;
margin:0px;
width:200px
}
.traynav li a:link, .traynav li a:visited {
color: #FFFFFF;
display: block;
background-image: url(../images/arrow_orange.gif);
background-position: 4px 7px;
background-repeat: no-repeat;
padding-top: 5px;
padding-right: 8px;
padding-bottom: 5px;
padding-left: 15px;
text-decoration: none;
}
.traynav li a:hover, .traynav li a:active {
background-color:#4cadcf;
}
.trayimage{
float:left
}
.trayimage img{
border: 1px dotted #c2dae2;
}
Thanks Well, I am stumped as they say. I have a horizontal menu bar which I am unable to get it to display with the same amount of space above and below it with IE and firefox. So if you would take a look at this page http://www.cacct.com/new/mission.php and here is the style sheet http://www.cacct.com/new/css/sitestyle.css The menu content is called by a php include. Notice the difference between IE and firefox. What I would like is the same amount of light blue above and below. Things I have tried... Adjusting the padding and margins to header and maincontent. Tried placing the menu bar in a div but in Firefox the bar actually hangs over the bottom edge of the div. I put a border around the div so I could see it. In IE it is contained within the div (though it is a bit too long for a single line there so wraps around). This probably wouldn't work anyway since the menu is a drop down and needs to overlap the maincontent. Just to look at it, I moved the menu bar up to different places. Inside the header below the address still same problem. Between the logo and address same problem. When I move it to the top, above the logo it appears to be the same distance from the top of the border. So, anyone have any ideas on how to get that spacing the same? tk I just launched my first website and I am having a little problem with spacing, it is pretty obvious. I tried the _ hack, and I played with some padding, but I couldn't get the thing to budge in IE. the site is (psugmb.com) Please help! Thank you! ::Kyle hey guys i'm having a problem with CSS line spacing. firefox is displaying correctly of course, and IE is scrunching the lines closer. here is an example (firefox on the right, IE on the left): here is the CSS: Code: #galleriesTextContainer
{
height: 130px;
margin: 0px;
padding: 0px;
margin-left: 8px;
line-height: 8pt;
}
.galleriesText
{
margin: 0px;
padding: 0px;
color: white;
font-family: Arial, Verdana, Sans Serif;
font-size: 11px;
}
Code: <div id="galleriesTextContainer"> <span class="galleriesText">dolphy day 2005 (132 images)<br />dolphy day 2004 (101 images)<br />buffalo wild wings (47 images)<br />lemoyne 2005 (425 images)<br />lemoyne 2004 (28 images)<br />lemoyne 2003 (147 images)<br />syracuse nationals 2004 (43 images)<br />nyc / jersey 2005 (245 images)<br />minutes monte (29 images)<br />my truck (67 images)<br />phil's t-type (70 images) </span> </div> Hey guys, First post here. I've scoured the web for answers, searched this forum, and visited many CSS sites (alistapart, maxdesign.com.au, positioniseverything, htmldog, etc.) and haven't seen a problem like this. I'm learning CSS as we speak (or more correctly, as I type), and here's the issue. I have a space between my #header and #page. I can't get rid of it unless I put a border around the #page. I've posted four screens here so you can see what's going on in Safari and Firefox (the two browsers I use). #1 is what the site looks like now (as the code is below). #2 is with the #header removed, #3 is with the #header removed and a 1px border put around the #page, and #4 is with the #header there and the #page has a 1px border. It seems to me that the #page has a top margin, and I've tried margin-top: 0px; and tons of other combos, but I can't get that space to go away unless I put a border around #page. Here's my css: Code: /* basic elements */
body {
font: 8pt/16pt georgia;
color: #000000;
background: #AEAEAE url(images/butterflybg.gif) no-repeat top center;
}
p {
font: 8pt/16pt georgia;
margin-top: 0px;
text-align: justify;
}
h1 {
font: italic bold 14pt georgia;
letter-spacing: 1px;
margin-bottom: 0px;
color: #000000;
}
h2 {
font: normal bold 12pt georgia;
letter-spacing: 1px;
margin-bottom: 0px;
color: #000000;
}
h3 {
font: normal 12pt georgia;
letter-spacing: 1px;
margin-bottom: 0px;
color: #000000;
}
a:link {
font-weight: bold;
text-decoration: none;
color: #FFFFFF;
}
a:visited {
font-weight: bold;
text-decoration: none;
color: #D4CDDC;
}
a:hover, a:active {
text-decoration: underline;
color: #9685BA;
}
/* divs */
#header {
background: url(images/2006_Header.png) no-repeat;
width: 697px;
height: 127px;
padding: 0px;
margin: 0px auto;
}
#page {
width: 697px;
background: url(images/2006_WideExt.png) repeat-y center;
margin: 0px auto;
padding: 0px;
}
#nav {
background: url(images/2006_LNav.png) no-repeat left;
padding: 0px;
margin: 0px;
width: 175px;
height: 306px;
float: left;
}
#content {
background: none transparent;
margin-top: 0px;
}
#text {
}
#footer {
text-align: center;
}
And my html: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title></title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="header"> </div> <div id="page"> <div id="nav"> </div> <div id="content"> <div id="text"> <p>put text here</p> </div> <div id="footer"> <a href="http://devshed.com" title="Forums">xhtml</a> </div> </div> </div> </body> </html> Am I overlooking something simple? Ok, I finally constructed the basic layout. But, I've encountered yet another problem. There seems to be a space for some odd reason between one of my images in the content div and one of the images in my news div. I want them to sit flush. Here's an image to show what my problem is: http://www.octavewebdesign.com/csshelp/spaceproblem.gif Here is the actual website: http://www.octavewebdesign.com/chilesxc/index.html The css can be found he http://www.octavewebdesign.com/chilesxc/style.css Any tips would be great. Please view in FF, as IE seems to mess it up... which is another problem for another day. Thanks. -Justin (but, if anyone has any solutions for the IE problem then that would be great to add it. For some reason IE makes the margins larger than they're supposed to be. The margin is set to 39 px, but it acts like a 50px margin for some weird reason. This causes the menu div to drop down below the content div.) Hi, Why there is such a big vertical space between table and element (div class="frm_container) in Internet Explorer 6. There is no space like that in Mozilla Firefox. What can I do about it? Thank you. Code:
<head>
<title>Title</title>
<style type="text/css">
.frm_container {
padding: 0px;
margin: 0px;
border: 1px solid #000;
background-color: #fff;
}
</style>
</head><body><div class="frm_container">
<form name="register" enctype="multipart/form-data" method="post" >
<table><tr>
<td align="right">Username:</td><td><input type="text" name="user" /></td>
</tr></table>
</form></div></body></html>
My site is displaying properly and in good way to the bullet that i've used in menu in FF. But in IE 7 bullet and text is too close which make menu un attractive. How can i fix this? any suggestion. if you want you can see nepalmedia . com . np thanks. Hi guys.. I have a script that spits out a series of divs.. The first 'wrapper' Div is position:relative, and I have placed other divs inside it, positioning them using position: absolute; left: 20px, etc... It renders perfectly on all my tested browsers, and yet when I make the script repeat, so that each div-set is loaded from the database, they just stack on top of each other on the page, rather than underneath each other.. All I am really doing is stacking divs, I thought that whatever went on in the 'child' divs didnt affect the parents ?? Like so: Code: <div style="position: relative;">
<div style="position: absolute; left: 20px; top: 40px;">
some content
</div>
<div style="position: absolute; left: 150px; top: 40px;">
other content
</div>
</div>
Ive tried setting things like display: block;, clear: both, etc, but the sets of divs just 'pile' on top of each other... Any ideas :/ Many thanks, Mike. Hello, this is my first attempt at a website and first attempt at using CSS as well. With much reading and the help of an online CSS layout creator I've been able to get pretty far, but have been having many roadblocks recently. For instance, the second heading in my layout is not displaying correctly in IE, but looks fine in FireFox. Please take a look at http://www.onlinecasinoboss.com/new_page_1.htm The second heading should lay directly underneath heading number 1, with a 2px margin in between header 2 and the main page layout. Also the text in the right, left and center columns starts as if it had a 12px or greater top margin. This problem exists in BOTH IE and FF. Please help, and thanks for anyone that takes the time to help a newbie web designer out. Due to letter-spacing double break won't work in IE. And triple break works as it is double break. How to solve this problem? Hi, I have a margin or spacing between the header image and the navigation bar. I'm unsure of how to remove it. I want the navigation to be directly underneath the header. This is the HTML Code: <div id="navbar"> <ul> <li><a href="index.html">Home</a></li> <li><a href="horses.html">Horses</a> <ul> <li><a href="stallions.html">Stallions</a></li> <li><a href="mares.html">Mares</a></li> <li><a href="geldings.html">Geldings</a></li> <li><a href="foals.html">Foals</a></li> </ul> </li> <li><a href="showteam.html">Show Team</a></li> <li><a href="showresults.html">Show Results</a></li> <li><a href="youths.html">Youths</a></li> <li><a href="sales.html">Sales</a></li> <li><a href="contactus.html">Contact Us</a></li> </ul> </div> This is the CSS Code:
#header {
background:#ddd;
border-left:1px solid #FFF;
border-right:1px solid #FFF;
border-top:1px solid #FFF;
}
#navbar {
font-family: Edwardian Script ITC, Verdana, Arial, sans-serif;
font-size:36px;
width:100%;
margin-top:0px;
padding:0px;
height:63px;
background-color:#FFF;
}
#navbar li {
list-style: none;
float: left;
}
#navbar li a {
display: block;
padding: 7px 8px;
background-color: white;
color: black;
text-decoration: none;
}
#navbar li ul {
display: none;
width: 5em; /* Width to help Opera out */
background-color: white;
}
#navbar li:hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0; }
#navbar li:hover li {
float: none; }
#navbar li:hover li a {
background-color: white;
border-bottom: 1px solid #000;
color: #000; }
#navbar li li a:hover {
background-color:#FFC; }
Any help would be appreciated! It's really frustrating me. I've tried looking around other websites for help too. Kim |
|||||||