|
CSS - Unexplained Spaces...
Similar TutorialsHi, I am experiencing additional space between 2 divs (#welcomeandsearch and #welcometext) but only when previewed in IE 6. They should be flush together and are when previewed in IE 8. My css all validates. Here is the css and html: Code: #welcomeandsearch {width:940px; float:left; margin: 0px}
#welcome {width:730px; float:left; color:#FFA000; font-size:1.75em; font-weight:normal; margin: 0px}
#welcometext {width:970px; float:left; padding: 0;}
#search {width:190px; float:left; color:#363636; font-size:0.75em; font-weight:normal;}
#searchbox {width:200px; float:left; color:#363636; font-size:1.0em; font-weight:normal; height:25px;}
form input.button {width:25px; height:15px; background:#FFC666; color:#363636; font-weight:bold; border:none; font-size:11px; margin:0 auto; padding:0px;}
form input.textfield {color:#363636; font-size:0.75em; font-weight:normal;}
<div id="welcomeandsearch">
<div id="welcome">
Welcome
</div>
<div id="searchbox">
<form id="form1" name="form1" method="post" action="">
<label>Search:</label>
<input name="textfield" type="text" class="textfield" id="textfield" value="enter keywords here" />
<input name="button" type="submit" class="button" value="Go" />
</form>
</div></div>
<div id="welcometext">to the Visa Europe Customer Self Help Resource. This online resource has been developed to assist all staff with their most common IT related problems and requests.</div>
Any ideas? Thanks. Pleae look at this page in IE8 & Firefox - Click Here It appears as I want it in FF but in IE there is a gap between the paragraph in the center column and the first listing of product. I have tried to put margins on all elements but can not get that closed in IE. Can someone shed some light? Thanks. Tom 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? 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. 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! 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. 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? 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? 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. 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. Can you have the a class name as follows: <tr class="row one"> . 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. 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 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. 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 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>
|
|||||||