|
CSS - Ff/ie - Input & Divs Slightly Off.
In my first attempt at a heavily CSS-based layout, I've run into this frustrating problem. I currently cannot get IE to remove 2px around my search box and line up correctly.
Example FF: Everything lines up perfectly. Example IE: You can see that the box around the search input is 2px lower than the box to the left. Here are the applicable classes: css Code: Original - css Code /* class for the div containing the search input */ .search { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #000000; border-bottom:1px solid black; vertical-align:middle; background-color:#FFFADE; text-align:center; padding-top:3px; margin-bottom:5px; height:20px; } /* class for the input fields */ .inputbox { font-family : Verdana, Arial, Helvetica, sans-serif; font-size : 10px; color : #000000; background-color : white; border : 1px solid black; } /* for the containing table td */ #right_boxes { font-family:arial,helvetica,sans-serif; font-weight:normal; font-size:12px; width:145px; border-left:1px solid black; padding:20px; border-top:4px solid black; }
The HTML for this section: html4strict Code: Original - html4strict Code <td id="right_boxes" valign="top"> <form action="index.php" method="post"> <div align="left" class="search"> <input alt="search" class="inputbox" type="text" name="searchword" size="20" value="search..." onblur="if(ths.value=='') this.value='search...';" onfocus="if(this.value=='search...') this.value='';" /> </div> <input type="hidden" name="option" value="search" /> </form> <td id="right_boxes" valign="top"> I have tried everything that I can think of. Any suggestions or answers would be greatly appreciated. TIA, Conor Similar TutorialsHello, I have the following code that creates a progress bar: Code:
<style>
table.meter {
background: url("img/m_bg.gif") left center repeat-x;
height: 13px;
font-family: sans-serif;
font-size: 11px;
}
table.meter td.mark{
background: url("img/m_mark.gif") right center repeat-x;
}
table.meter td.mark div{
background: url("img/m_l.gif") left center no-repeat;
}
table.meter td{
background: url("img/m_r.gif") right center no-repeat;
}
</style>
<table cellspacing="0" cellpadding="0" class="meter" width="250">
<tr>
<td id="mark" width="60%" class="mark"><div> </div></td>
<td> </td>
</tr>
</table>
This will make only image progress bar, but how can I write percents straight after table (on the right)? I need it to look something like this: <|||||||| > 60% But if I write "60%" after </table> tag, it will appear on the next line, and if I add another <td> to the table, it will inherit background from table.meter style and I don't need that. Hope somebody help me. Thank you in advance. Okay, because of a conflict with Sothink Menu Builder I cannot use the container or wrapper tag the way I normally would on my CSS. Instead, I've done this: Code: * { margin:0; padding:0; }
body {
margin: 0 auto;
width: 1000px;
text-align: center;
background-color: #e0d7e6;
height: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000;
letter-spacing: normal;
vertical-align: top;
word-spacing: normal;
white-space: normal;
line-height: normal;
padding: 0px;
background-image: url(../images/shared/gifs/bacgrnd.gif);
background-repeat: repeat-x;
}
#wrapper {
text-align: left;
position: relative;
z-index: 0;
}
And the HTML: Code: </head> <body><div id="wrapper"> webpage content </div></body> And it works well, except the page is off center (to the right) by a couple of pixels. It's in all browsers. Does anyone have a fix? Thanks in advance. BIO BIO CSS i would like for both the image and text to be centered on page-- they are just a little off.... am using FOX as primary browser -- but IE displays pretty much the same-- anyone got a fix for this??? its late and i have been over the coding a million times but just dont see the solution it right now thanks in advance! Alright... I give up on this one. The copyright moves up and down by a pixel or two between different pages. Go from the Home page to the Diabetes page and look at the footer and you will see. I have tried changing the margins, padding, and line-height on the text in the footer. I can get it to temporarily work but as soon as I change anything above the copyright (i.e. in the #content div) like line-height, add text, and etc it moves the copyright between pages again. Basically the content div is pushing down on the copyright differently depending on the amount of text that is in the article. Because other than the text all the articles pages code is exactly the same. All the footer text is a PHP include if that makes a difference. Thanks for looking at it because I have been working on this for quite a few days now and it is buggin the ba-jesus out of me? I have a theory, the footer (thats where the copyright is) is absolute positioned. Therefore it is taken out of the flow of the document. Could this be the cause of my problem? So if I were to place all the copyright and footer links within another div within the footer div would that bring those back into flow? Like if I gave that new div a position of static or something? Or is it out of the flow regardless because it's sitting inside of an absolute positioned div? Thanks a lot - here is the site in question Ok, so I've learned to stay away from tables when you don't need them, and I have an instance where this is the case. I have a container div that has a header, content and a footer. On my home page, I have to divs next to each other with the same height and a div below them towards the right. To simplify my problem, look at this example. Code:
<html>
<body>
<div style="float:right">
Hello there!
</div>
<hr>
</body>
</html>
If there's a "float:right" on that div, the hr tag below doesn't get pushed down. But if I use relative positioning and don't use the floats, I can't put the two top divs next to each other. The other option is to use absolute positioning, but again content below doesn't get pushed down correctly. It seems that using "clear:both" works, but it seems weird that this has to be done. For example if I have floating divs in a container, I can get them to stretch out the container like so: Code:
<html>
<body>
<div style="border: 1px solid #000; ">
<div style="float:right">
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
</div>
<div style="clear: both"></div>
</div>
<hr>
</body>
</html>
Am I missing something fundamental here? Is there a better solution? Thanks in advance. Centering DIVs inside other DIVs in Firefox? Can it be done in a straight forward way? Setting the inner DIVs float to none seemed to work for IE but not FF. Here's the site in Question: http://www.winchps.vic.edu.au It's a standard fixed width floated DIV columns with a wrapper. One thing it does have is a second DIV inside both columns to display the Gradient background over the top of the repeated background. It works perfect in Firefox & IE7 (with a tweak) but IE6 mkes the sidebar nested div drop below the original sidebar DIV click here for a screenshot for those lucky enough not to have IE6. Here's the CSS code for the basic layout: Code:
body {
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
font-size: 12px;
text-align: center;
margin: 0px 0px 60px 0px;
padding:0px;
border: 0;
line-height: 2;
}
#header {
width: 802px;
}
#wrapper {
width: 802px;
margin:0px;
padding: 0px;
text-align: left;
margin: 0 auto;
background: url(images/bodybg.jpg) center repeat-y;
}
#content {
padding: 0px;
margin: 0px;
}
#maingrad {
background: url(images/winchcontentgrad.jpg) top left repeat-x;
padding: 10px;
}
#main {
width: 589px;
float: right;
background: url(images/winchcontentbg.jpg) repeat;
border-left: solid 1px #000;
border-right: solid 1px #000;
}
#mainstop {
width: 589px;
float: right;
background: url(images/winchcontentbg.jpg) repeat;
border-left: solid 1px #000;
border-right: solid 1px #000;
border-bottom: solid 1px #000;
font-size: 10px;
}
#sidebargrad {
background: url(images/winchsidebargrad.jpg) top left repeat-x;
padding: 10px 5px 0px 10px;
}
#sidebar {
width: 200px;
float: left;
background: url(images/winchsidebg.jpg) repeat;
line-height: 2;
font-size: 14px;
border-left: solid 1px #000;
border-right: solid 1px #000;
}
I obviously need to put a conditional comment in there, same for what I did for the minor IE7 tweak, but I'm struggling to suss out what's causing it, I haven't found the specific issue on any of the regular sites (PIE etc). Anyone got any ideas? The Example I've read a bunch about how div's won't stretch to accomidate div's inside of them if they overrun the height/min-height set for the container div. How do I get around this? You can see the skeleton of the site above. It's fine unless you resize the window smaller than the content. Alright, I've been working on my own custom border box for a while and I've almost got it, but it has a few problems still. How I do it is I have one div that contains it all (.box) that defines the height and width of the whole box. Then I have three boxRows to lay out the images, and then I define how three cells in each of those rows should behave, very much like how custom borders used to be done with tables. Here are the problems: In both firefox and internet explorer, the bottom row and the far right column actually appear OUTSIDE the .box containing box. There are two additional problems in internet explorer. First, the middle row handles the auto height differently and only expands about 10px instead of the height of the containing box. The second is that the whole middle row for some reason appears to be pushed to the right by about 16px. Any help would be appreciated. Here's the code: HTML: Code: <html> <head> <link rel="stylesheet" type="text/css" href="reset.css" /> <link rel="stylesheet" type="text/css" href="testBox.css"> </head> <body> <div class="box"> <div class="boxRowTop"> <div class="boxCellLeft"></div> <div class="boxCellMiddle"></div> <div class="boxCellRight"></div> </div> <div class="boxRowMiddle"> <div class="boxCellLeft"></div> <div class="boxCellMiddle"></div> <div class="boxCellRight"></div> </div> <div class="boxRowBottom"> <div class="boxCellLeft"></div> <div class="boxCellMiddle"></div> <div class="boxCellRight"></div> </div> </body> </html> And here is the layout css file: Code: /* Box classes */
.box {
background: rgb(120,120,120);
height: 200px;
width: 500px;
}
.boxRowTop {
height: 16px;
position: relative;
width:%100;
}
.boxRowMiddle {
height: auto;
width:%100;
position: relative;
}
.boxRowBottom {
height: 16px;
width:%100;
position: relative;
}
.boxCellLeft {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 16px;
}
.boxCellMiddle {
height: 100%;
margin-left: 16px;
margin-right: 16px;
width: auto;
}
.boxCellRight {
height: 100%;
left: 100%;
position: absolute;
top: 0;
width: 16px;
}
/* Define Cell Backgrounds/Images */
.boxRowTop .boxCellLeft {
background: url(../LandingImages/topleft_circ_corner.png) no-repeat;
}
.boxRowTop .boxCellMiddle {
background: url(../LandingImages/top_border.png) repeat-x;
}
.boxRowTop .boxCellRight {
background: url(../LandingImages/topright_circ_corner.png) no-repeat;
}
.boxRowMiddle .boxCellLeft {
background: url(../LandingImages/left_border.png) repeat-y;
}
.boxRowMiddle .boxCellMiddle {
background: rgb(255,255,255);
}
.boxRowMiddle .boxCellRight {
background: url(../LandingImages/right_border.png) repeat-y;
}
.boxRowBottom .boxCellLeft {
background: url(../LandingImages/bottomleft_circ_corner.png) no-repeat;
}
.boxRowBottom .boxCellMiddle {
background: url(../LandingImages/bottom_border.png) repeat-x;
}
.boxRowBottom .boxCellRight {
background: url(../LandingImages/bottomright_circ_corner.png) no-repeat;
}
And last, the reset CSS, which I don't think has anything to do with the problems because if I take it out it still has them. Code: html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, tt, var, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, caption
{
margin:0;
padding:0;
border:0;
vertical-align:baseline;
}
* {font-size:1em; font-family: inherit;}
:focus {outline:none;}
body { font-size: 62.5%; line-height:normal; font-family: Arial, Sans-Serif; color:Black; } /* 62.5% (10px), 75% (12px), 87.5% (14px), 100% (16px) */
p { margin: 0 0 1.2em 0; }
a { color:#ff0000; text-decoration:none; }
a:link { color:#ff0000; text-decoration:nonee; }
a:visited { color:#ff0000; text-decoration:none; }
a:active { color:#ff0000; text-decoration:none; }
a:hover { color:#ff0000; text-decoration:none; }
a.h1,a.h2,a.h3,a.h4,a.h5,a.h6,h1,h2,h3,h4,h5,h6
{
font-weight:bold;
display:block;
text-decoration:none;
color:Black;
}
h1, a.h1, a:link.h1, a:visited.h1, a:active.h1, a:hover.h1 { color:Black; text-decoration:none; font-size: 2.00em; }
h2, a.h2, a:link.h2, a:visited.h2, a:active.h2, a:hover.h2 { color:Black; text-decoration:none; font-size: 1.75em; } /* this is normally skipped? 1.50em */
h3, a.h3, a:link.h3, a:visited.h3, a:active.h3, a:hover.h3 { color:Black; text-decoration:none; font-size: 1.50em; } /* 1.25em */
h4, a.h4, a:link.h4, a:visited.h4, a:active.h4, a:hover.h4 { color:Black; text-decoration:none; font-size: 1.25em; } /* 1.00em */
h5, a.h5, a:link.h5, a:visited.h5, a:active.h5, a:hover.h5 { color:Black; text-decoration:none; font-size: 1.00em; } /* 0.75em */
h6, a.h6, a:link.h6, a:visited.h6, a:active.h6, a:hover.h6 { color:Black; text-decoration:none; font-size: 0.75em; } /* 0.66em WTF? */
fieldset { border:solid 1px; padding:0.25em 0.5em 0.75em; margin: 0 0 1.5em; }
legend { margin:0 0 0 2em; padding:0 1em; }
textarea, input, select { border:solid 1px #ccc; margin:0; padding:0; }
textarea, input { padding:0 .2em; }
input:focus,textarea:focus,select:focus { border:solid 1px black; }
small { font-size:.9em; }
ul, ol, dl { position: relative; padding:0 0 0 1.5em; margin:1.5em 0; }
dir, menu { margin:1.5em 0; }
/* nested lists have no top/bottom margins */
ul ul, ul ol, ul dir, ul menu, ul dl,
ol ul, ol ol, ol dir, ol menu, ol dl,
dl ul, dl ol, dl dir, dl menu, dl dl,
dir ul, dir ol, dir dir, dir menu, dir dl,
menu ul, menu ol, menu dir, menu menu, menu dl
{
margin:0;
padding: 0 0 0 1.5em;
}
hr { margin:0.75em 0; padding:0; }
Any help would be GREATLY appreciated, as I've been working on this for a while! Thanks! I get this error from XML-CSS validation. The element type "input" must be terminated by the matching end-tag "</input>". I'd like to know where it goes. It is this form: <form action="send_survey_results.php" method="POST"> Name: <input type="text" name="user" SIZE="30"><br> e-Mail: <input type="text" name="email" size="30"><br> Interests:<br> <input type="checkbox" name="intere<input type="submit" value="Register"> ------------additional boxes here------------------ <input type="reset" value="Clear Form"> </form> </div>sts[]" value="clothes">Clothes Thank you, Ed In IE my center div is even with the rest of the columns. in ff it is not. why? My style sheet does not specify a top-margin to be anything other than default ... http://www.nevertap.com/event.php Right now I'm using a table for showing how many people from each state have signed a petition. It looks sort of like this: Code: <table> <tr> <td bgcolor="#FDFCE5" align="center"><a class="state" href="./signers.php?search_field=state&state=CA">CA</a></td> <td bgcolor="#FDFCE5" align="center"><a class="state" href="./signers.php?search_field=state&state=CA">1242</a></td> </tr> <tr> <td align="center"><a class="state" href="./signers.php?search_field=state&state=TX">TX</a></td> <td align="center"><a class="state" href="./signers.php?search_field=state&state=TX">550</a></td> </tr> <tr> <td bgcolor="#FDFCE5" align="center"><a class="state" href="./signers.php?search_field=state&state=FL">FL</a></td> <td bgcolor="#FDFCE5" align="center"><a class="state" href="./signers.php?search_field=state&state=FL">487</a></td> </tr> </table> Should I be using DIVs? 1.On amazon.com's home page, they have a search bar with a background image on top of another background image. Is this done with a background div with z index 1 immediately followed by the search bar's background div with z index 2? 2.I'm confused about where divs are to be placed. If you have a form with a table layout, would the div be placed outside the form tag or outside the table tag? Please have a look at http://www.root.lamtha2.co.uk/cssproblem/ why is there a gap between #header and #maincontent in both IE and FF how do I resolve? thanks Hi all, I've got a section of my site with three tabs at the top of it, and I want to change the content in the section depending on which tab is chosen, with a set of divs. I've been told that you can turn divs on and off with a button click. Can anybody tell me how to do this? Cheers hi all i am trying to have a container that contains two divs....one sidecase and one main content problem i am having is getting them to aign across the page - that is the main content page is starting where the sidebar ends......any ideas?? Hello I was wondering if any one could help me with a problem with some divs, I would like to create a web page using just css and html which looks like this:- Whay I would like to know is how would I get the divs to keep aliened as in the picture?? Any help would be very appreciated. |
|||||||