|
CSS - Css Newbie...(dead Spaces)
I'm new to CSS, so I apologize if this is quite elementary.
www.thinkblue2008.com Among the obvious stylistic things I'm working on, I need to get the deadspace areas figured out first. Basically, how can I a) get the columns to automatically extend (ie, white down to the footer) b) get rid of the space between Thanks, in advance, for your time and patience. Similar TutorialsI'm trying to use a dead centre script: Code:
div {
font-family: Arial, Helvetica, sans-serif;
position:relative;
}
#horizon
{
background-color: #0ff;
text-align: center;
position: absolute;
top: 50px;
left: 20px;
}
/* following rules are invisible to IE 5 \*/
#horizon
{
background-color: #0ff;
text-align: center;
position: absolute;
top: 50%;
left: 0px;
width: 100%;
height: 1px;
overflow: visible;
visibility: hidden;
display: block;
}
/* end IE 5 hack */
#content
{
font-family: Verdana, Geneva, Arial, sans-serif;
background-color: #ffffff;
margin-left: -400px;
position: absolute;
top: -230px;
left: 50%;
width: 800px;
height: 459px;
visibility: visible;
border:1px solid #999999; width:800px; height:459px;
}
And found a hack that is supposed to work with mac IE5 (the /* IE5 note there), but dont know what it's doing for safari. Does anyone know any workarounds for safari or know a browser detection script that can lead non-mac browsers to my dead center page and mac browsers to another page that is maybe only simply centered. I'm using a two column layout (main, sidebar), and within the main column, there is a section that breaks into two columns. I'm using this code:
Code: <div>
<p>Some main column content</p>
</div>
<div id="inner_col_wrap">
<div id="col_left">
<p class="col">Cum sociis natoque penatibus et magnis dis parturient montes</p>
</div>
<div id="col_right">
<p class="col">Cum sociis natoque penatibus et magnis dis parturient montes</p>
</div>
</div>
<div>
<p>Some more main column content</p>
</div>
The problem is that some of the content that follows the two column block ("Some more main column content") is pushed up into the "col_right" DIV when "col_left" and "col_right" are not equil ("col_right is shorter than "col_left", and there is space at the bottom). How to keep the conent that follows the two column block out of it? is there a way using css to control how much space is below and above a form button, because I have a lot of form buttons and the space between them is killing my design. Thanks Hi I've trying to use a UL list to display a menu on my site. I'm having a problem with spacing tho. No matter what I do, there always seems to be a slight space between the LI elements. Code is as follows: PHP Code: #menu { margin: 0; padding: 0; list-style: none; } <ul id="menu"> <li><a href="thestore.php"><img src="images/menu_thestore.gif" width="195" height="36" border="0" alt="The Store" onmouseover="this.src='images/menu_thestore_over.gif'" onmouseout="this.src='images/menu_thestore.gif'" /></a></li> <li><a href="steel_toe_cards.php"><img src="images/menu_steeltoe.gif" width="195" height="36" border="0" alt="Steel Toe Cards" onmouseover="this.src='images/menu_steeltoe_over.gif'" onmouseout="this.src='images/menu_steeltoe.gif'" /></a></li> <li><a href="locations.php"><img src="images/menu_locations.gif" width="195" height="36" border="0" alt="Locations" onmouseover="this.src='images/menu_locations_over.gif'" onmouseout="this.src='images/menu_locations.gif'"/></a> </ul> Would it be something to do with the fact I'm using images as menu options?? There's always a slight space between them, and I can't figure out why! Hello, I have question regarding proper use of CSS, so I can get web site layout to display properly in both IE and Firefox. At the moment it's laid out properly in FF, but I have some problems with IE. The cells of a table "deform" while browsing in IE. This is how it looks like: URL http://i38.tinypic.com/5ffe6q.gif Here is html of the cells in question: Code: <table class="cHs" width="1000" border="0" align="center" cellpadding="0" cellspacing="0" background="pic/topcenter.jpg"> <tr> <td colspan="3" class="cHs" width="1000" height="145"><img src="pic/logo.jpg" border="0"> </td> </tr> <tr> <td class="cHs" background="pic/left.jpg" width="47" valign=top></td> <td class="cHs" align=center width="906" background="pic/backcen.gif" class=interior valign=top> <td class="cHs" background="pic/right.jpg" width="47"></td></tr><tr><th align="left" valign="top" scope="row" height=\"37\" background="pic/bottom1.gif"></th><td class="cHs" height="37" width="906" background="pic/bottom2.gif" align="center" valign="top"> </td> </tr> </table> Here is used CSS: Code:
table.cHs{ background: transparent;
border: none;
}
td.cHs { border: none;
}
Does anybody see a problem? Thanks in advance. Hi, I have made drop down menus using css and they work fine in Firefox and Opera, but in internet explorer the drop down images all have spaces in between them could someone tell me how to solve this? Thanks xhtml source http://cyberinsomnia.com/index.php css source http://cyberinsomnia.com/styles/default.css Thanks, Jacob Hello folks, I have this page Code: (chep-net.com/main_nav) and on the left side of the table cell it always renders a small space. I tried cellpadding 0. Did I miss something? 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"> <body> <table cellpadding=0 cellspacing=0 border=0 style="margin:0;padding:0;"> <tr style="margin:0;padding:0;"> <td style="border:1px solid black;width:120px;height:90px;text-align:center;margin:0;padding:0;"> <img src="http://www.gamertagpics.com/filesave/k/Ku/s_Kurow_Shinobi.jpg" style="margin:0;padding:0;height:100px;"> </td> </tr> </table> </body> </html> I made it as simple as could be. 1 table, with 1 row, with 1 cloumn with 1 image. EVERYTHING has a margin of 0 and padding of 0. Why is there still a space below the image? Please tell me how to remove this space. In both FF and IE, my site http://niosis.awardspace.com/polend.html doesn't display right. Look at the link below to see exactly how it is supposed to look. Here is how it is supposed to look: http://niosis.awardspace.com/tempsliced.html but of course that uses tables so I'm fixing it, and as you could see in the previous link having problems doing so. and if you think it looks bad in Firefox, just open up internet explorer and take a look at it. ewww.... Anyways, thanks in advance to anyone who can help me. The XHTML Validates strictly. So Im having this problem where when the user inserts a word with more than 15 chars with no spaces, that word will come out of my
Code: .product_wrap .title {width:120px;}
Div. Code:
<style type="text/css">
body {background:#CCC;
padding:5px 5px 0px 5px;
margin:10px 5% 0px 5%;
min-width:210px;
}
/*PRODUCTS*/
.product_wrap {background:#FFF;
margin:0px;
min-width:210px;
max-width:600px;}
.product_wrap div {background:#093;
margin:5px;
padding:0px;
min-height:100px;
float:left;}
.product_wrap .title {width:120px;}
<style/>
<body>
<div class="product_wrap">
<!--Title-->
<div class="title"><?php echo htmlentities($_POST['title']);?></div>
</div>
</body>
How can I amend this? Thank you in advance. Hello everyone, I have this issue where Firefox keeps making unwanted spaces between the headers/dividers of my content. My page is located at: hainescityhighschool(dot)com/development/beta (please view in both IE and Firefox to get the idea) I can't post links because of my user status but that should be a valid URL. Anyways, Firefox 3.0 is the version I'm having problems with. I haven't tested it in other versions. Where it says welcome, I want the divider image to be almost directly underneath it, and in IE it works. Only firefox seems to have an issue. Any ideas? Hi everyone, I am working on a conceptual design with basic js rollovers and css. When I center the divs I get a small horizontal space between the divs. I have only tested this in firefox. My css for each div is: #foo{ margin: 0 auto; text-align: left; background: #006600; width: 800px; } and the page can be seen he bdgplans.com/concept/roll2.html At http://www.glish.com/css/7.asp there is a 3 column layout, I have taken it and put it all inside one containing <div>. I am trying to get the columns to have spaces between them, but they won't seperate without going to the bottom of the page. Here are the relevant styles: Code:
#main {
margin:auto;
width:800px;
}
body {
margin:10px 10px 0px 10px;
padding:0px;
}
#leftcontent {
float:left;
width:180px;
height:400px;
background:#fff;
border:1px dashed #000;
}
#centercontent {
float:left;
margin:auto;
background:#fff;
width:400;
height:1000;
border:1px dashed #000;
}
html>body #centercontent {
margin-left:auto;
margin-right:auto;
}
#rightcontent {
float:left;
width:180px;
height:400px;
background:#fff;
border:1px dashed #000;
}
The first and second columns separate but not the third Code: <div id="main"> <div id="banner"> <h1>TITLE</h1> </div> <div id="leftcontent"> <h1>leftcontent</h1> </div> <div id="centercontent"> <h1>centercontent</h1> </div> </div> <div id="rightcontent"> <h1>rightcontent</h1> </div> </div> Thank you [EDIT] Nevermind, after looking at the "Nested Float" example on glish, I just nested it and float:right. If anyone is interested here is the updated #rightcontent style (now called #main #rightcontent) Code:
#main #rightcontent {
float:right;
width:180px;
height:400px;
background:#fff;
border:1px dashed #000;
}
All you have to do is change the name and the float. I have an asp page that displays some text which is formatted by a stylesheet. The colour of the text box depends on the text itself. For example, the information displayed is a risk. If the risk is 'None', the box is white, if it is 'High', the box is red, etc. The class is determined programmatically, according to the actual risk. In the stylesheet I have a class called 'None', another called 'High', etc. The problem I have is that one of the risks is 'No Risk' which obviously has a space in it. The text MUST say 'No Risk' so the solution is not to have text with no space in. How do I create a class in my stylesheet called No Risk? If I type it literally, with the space, it doesn't recognise it. I have a procedure that selects the Risk from a database table. The asp page has the following line to set the class: Response.Write "<td class=" & chr(34) & Replace((rs.Fields.Item("risk").Value) , " ", "") &"2" & chr(34) & ">" & (rs.Fields.Item("risk").Value) & "</td>" Any help would be very gratefully receive it as I am rapidly running out of hair! Thank you. Can you have the a class name as follows: <tr class="row one"> . I'm not sure what is causing the extra spaces to the top and bottom area of the images... Code:
<div style="margin:0px;padding:0px;background-color: #FF0000;">
<img src="images/mod_bt2.gif"><br>
<img src="images/mod_bt1.gif"><br>
<img src="images/mod_bt7.gif"><br>
<img src="images/mod_bt6.gif">
</div>
I'm wondering how do I eliminate the space between the image banner and the UL,LI tags?? It worked fine in Mozilla but not in IE... So, I figure an IE hack is needed... Code:
.amsBannerTop
{
width: 600px;
height: 120px;
margin: 0px;
padding 0px;
}
#dmenu
{
margin-left: auto;
margin-right: auto;
margin-bottom: 35px;
margin-top: 0px;
width: 26em;
font-family: Verdana;
font-style: normal;
font-size: 10pt;
font-weight: normal;
}
#dmenu ul li
{
/* blank... */
}
#dmenu li:hover ul
{
/* lists nested under hovered list items */
display: block;
}
#dmenu li.over ul
{
display: block;
}
Code:
<div>
<img class="amsBannerTop" src="image/AMS_Banner_RoughDraft3.jpg" alt="" border="1">
<ul class="xMenuUl" id="dmenu">
<li class="xMenuLi"><a href="" class="xMenuTitle">Home</a>
<ul class="xSubmenuUl">
<li class="xSubmenuLi"><a href="">Frequently asked questions</a></li>
<li class="xSubmenuLi"><a href="">Impressum - Required by Law</a></li>
<li class="xSubmenuLi"><a href="">Links and whos better than me</a></li>
<li class="xSubmenuLi"><a href="">Sitemap - quick list of all links</a></li>
</ul>
</li>
<li class="xMenuLi"><a href="" class="xMenuTitle">Perl</a>
<ul class="xSubmenuUl">
<li class="xSubmenuLi"><a href="">Trees, Twigs and XML</a></li>
<li class="xSubmenuLi"><a href="">Perl Data Types and using Hashes</a></li>
<li class="xSubmenuLi"><a href="">XML Data and how to write it</a></li>
<li class="xSubmenuLi"><a href="">XML Data and why I love it</a></li>
</ul>
</li>
<li class="xMenuLi"><a href="" class="xMenuTitle">SVG</a>
<ul class="xSubmenuUl">
<li class="xSubmenuLi"><a href="">Interactive with the mouse</a></li>
<li class="xSubmenuLi"><a href="">Basic objects and which software</a></li>
<li class="xSubmenuLi"><a href="">Interactive does not mean it is Flash</a></li>
<li class="xSubmenuLi"><a href="">Animated ECMA and generating objects on the fly</a></li>
<li class="xSubmenuLi"><a href="">Clipart and Popart</a></li>
</ul>
</li>
</ul>
</div>
Thanks, FletchSOD I've got the standard <ul><li> horizontal menu, but each menu item has a space between it. I've tried wrapping the entire menu in a div with a background color, but so far I've had no luck. Can I change the CSS to not have padding between? also, why does a styled <hr> not appear in Firefox? Thanks for the help! Here is what I have in the code. css Code:
#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
}
#navcontainer ul li {
display: inline;
}
#navcontainer ul li a
{
text-decoration: none;
padding: .2em 1em;
color: #FFFFFF;
background-color: #C0C0C0;
}
#navcontainer ul li a:hover
{
color: #C0C0C0;
background-color: #FFFFFF;
}
html Code:
<div id="navcontainer">
<hr />
<ul>
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="index.html">Products and Services</a>
</li>
<li>
<a href="index.html">Employment</a>
</li>
<li>
<a href="index.html">Blah</a>
</li>
<li>
<a href="index.html">Home</a>
</li>
</ul>
</div>
The page below renders as I want in Firefox but IE inserts extra spaces I don't want in the 1st list. I've worked out I can get rid of this by removing all whitespace from the html, but this makes for some hard to maintain code. Is there something I can do in css that will make IE handle the list the way I want it to? 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=UTF-8" />
<title>New Document</title>
<style type="text/css">
#nav
{
background: #eef;
font-size: 0.8em;
}
#nav a
{
text-decoration: none;
color: black;
background: #ffe;
display: block;
}
#nav a:hover
{
color: white;
background: blue;
}
#nav ul
{
list-style: none;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id='nav'>
Example 1
<ul>
<li><a href="">Item 1</a>
<ul>
<li><a href=''>Item 1 1</a></li>
<li><a href=''>Item 1 2</a></li>
<li><a href=''>Item 1 3</a></li>
</ul>
</li>
<li><a href="">Item 2</a></li>
<li><a href="">Item 3</a></li>
</ul>
Example 2
<ul><li><a href="">Item 1</a><ul><li><a href=''>Item 1 1</a></li><li><a href=''>Item 1 2</a></li><li><a href=''>Item 1 3</a></li></ul></li><li><a href="">Item 2</a></li><li><a href="">Item 3</a></li></ul>
</div>
</body>
</html>
|
|||||||