|
CSS - (ie7) Form::input::text - Pushed To The Left, If String Is Too Long
Hi!
Have been bashing my head against the wall with this one for a while now, so I thought maybe someone here could help me out a bit. Basicly, this sums up the issue: (sorry for the pure-text link, it didn't allow me to put up a propper one... >.<) http://img205.imageshack.us/my.php?image=cssiebug.png So, what I want is that the search field stays put, no matter how much text is entered into it. This works in all the other browsers, thought it's still a bit buggy, but I think I can fix that. Here is the code that should be of interest in this issue: Code:
<div id="bannerContent">
<!--{{{-->
<div id="logo">
<a href="<?PHP echo $home ?>" target="_self"></a>
</div>
<div id="search">
<form>
<input type="text" class="searchField" name="uSearchQuery">
<input type="submit" class="searchSubmit" name="uSubmitQuery" value="" onFocus="this.blur()">
</form>
</div>
<!--}}}-->
</div>
Code:
#bannerContent
/*{{{*/
{
width: 800px;
height: 158px;
}
#logo
/*{{{*/
{
background: url("../images/layout/logo.png") no-repeat;
width: 394px;
height: 56px;
position: relative;
top: 51px;
left: 24px;
float: left;
}
/*}}}*/
#search
/*{{{*/
{
width: 331px;
height: 32px;
position: relative;
top: 62px;
left: 58px;
display: inline;
float: left;
}
.searchField
{
background: url("../images/layout/search_field_bg.png") no-repeat;
width: 266px;
height: 32px;
border: none;
outline: none;
float: left;
<?PHP
if (!$agentIE && !$agentFF)
echo 'padding-left: 10px;' . "\n";
else
echo 'padding: 8px 0 0 10px;' . "\n";
?>
}
.searchSubmit
{
background: url("../images/layout/search_button.png") no-repeat;
width: 55px;
height: 32px;
margin-left: -10px;
border: none;
outline: none;
cursor: pointer;
float: left;
}
/*}}}*/
/*}}}*/
Thanks a bunch in advance! Similar TutorialsHi, hopefully you enjoyed the title, I had a good laugh thinking of it in that split second it took me to write it. So, I found a 3 column css layout on a CSS generator website, because I got sick of trying to hack up layouts I've made in the past that didn't work. Anyhow, it was working fine with one line of content in each column when I tested it out, however, once content in the middle column was added, and stretched vertically beyond a certain point, it will drag the left columns content down with it. The right column is not affected in any way. I have spent a few hours trying to look for reasons as to why it would happen, but I had no luck. I would appreciate any help... so thank you in advance if you take a stab at it. Here's the html: Code: <body> <div id="pagewidth"> <div id="header"></div> <div id="wrapper" class="clearfix" > <div id="twocols" class="clearfix"> <div id="maincol">Main Text, woot. (aka hi hi hi)</div> <div id="rightcol">Sidebar, yippee.</div> </div> <div id="leftcol"> <div id="navigation">test</div> </div> </div> <div id="footer"></div> </div> </body> and the CSS: Code: html, body
{
background: #333399;
margin:0;
padding:0;
text-align:center;
font-family: Verdana, Arial, Tahoma;
font-size: 12px;
font-weight: normal;
color: black;
}
#pagewidth
{
width: 750px;
text-align:left;
margin-left:auto;
margin-right:auto;
background: #333399 url('images/bodycontent.gif') repeat-y center top;
}
#header
{
position:relative;
height:138px;
background: url('images/header.gif') center;
width: 100%;
}
#leftcol
{
width: 118px;
float: left;
left: 25px;
position: relative;
background-color: transparent;
margin:0; padding:0;
}
#twocols
{
width: 700px;
float: right;
position: relative;
}
#rightcol
{
width:180px;
right: 25px;
float:right;
position:relative;
background-color: transparent;
}
#maincol
{
background-color: transparent;
float: left;
left: 100px;
display: inline;
position: relative;
width: 390px;
}
#footer
{
text-align: center;
height:39px;
background: url('images/footer.gif');
clear:both;
}
.clearfix:after
{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix{display: inline-table;}
/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */
/*printer styles*/
@media print{
/*hide the left column when printing*/
#leftcol{display:none;}
/*hide the right column when printing*/
#rightcol{display:none;}
#twocols, #maincol{width:100%; float:none;}
}
Again, thank you in advance if you can come up with anything. This is driving me nuts.... You see how the text is a tad hight than the form input ? How do i make them align ?! Thanks. Hi there! I'll cut right down to the chase: is my method of styling form input fields efficient? Is there a better way to do it? I tried directly styling the input, rather than putting it in a div, but it didn't work in IE (when too much text went into the field, the background would move, no matter what I did. ) Also, is my <label> styling okay? HTML Code: Original - HTML Code <div class="formRow"> <div class="textInput"> <input class="textInput" id="name" type="text" /> <label for="name">Name</label> </div> </div> <div class="formRow"> <div class="textInput"> <input class="textInput" id="name" type="text" /> <label for="name">Name</label> </div> </div> CSS Code: Original - CSS Code #content div.formRow:hover { background-color: #EEE; } #content input.textInput { font-size: 14px; color: #666; padding: 3px 5px; width: 190px; height: 20px; border: 0; background-color: transparent; } #content input.textInput:focus { color: #000; } #content div.textInput { margin-left: 50px; background: transparent url('images/textInput.png') no-repeat; } #content div.textInput label { font-size: 14pt; font-weight: bold; margin-left: 50px; vertical-align: top; }
And lastly... my image: Thanks a lot! For some reason, I cannot get my 2 form elements to line up as far as height is concerened. No matter what I try, one is always slightly taller than the other, even if I set both to the same height. Any ideas? Code: input[type="text"], select {
color:#888888;
font-size:10px;
height:auto;
}
Hi How can I wrap a long line of text inside a fixed width div? Hello, I'm currently in the works of converting an old HTML site of mine into CSS and have run into what seems to be a notorious problem with the page text not pushing the footer down when the text gets to a certain length. Instead the text just covers and hides the footer. I've been trying to remedy this problem for about a week, but to no avail. I've Googled this problem and tried the suggested fixes, but once again have had no such luck. I'm left to believe that every instance is unique. If you view the Style Sheet, I have the 'footerlinks' set at an "Absolute" position because it looks fine on the other pages and I do relize this will have to be changed. As to what else has to be changed I would really appreciate some input as to what I need to do to get the footer to slide down when the text gets lengthy. ------- Here's a link to the page thats having issues with the footer... *** Note: I keep getting an error message saying I can't post URLs on this forum because I have a new user account so below this line is the link to the page I'm having trouble with without the http:// ........ infoheaven.bravepages.com/Testamonials/Testimonials.htm The URL to the STYLE SHEET is located at the top of the page between the "Head" tags of the website source code I provided above. I tried listing my CSS code here, but once again I kept getting the "New user accounts are not permitted to create posts containing URLs" error message. Sorry for the inconvenience.... Dan - This is the line in my index.html: PHP Code: <PRE class=yup>blah blah blah and more blah blah blahblah more blah blah blah yes yes blah blah</PRE> This is my PRE code in style.css: PHP Code: PRE { BORDER-RIGHT: #2f6fab 1px dashed; PADDING-RIGHT: 1em; BORDER-TOP: #2f6fab 1px dashed; PADDING-LEFT: 1em; PADDING-BOTTOM: 1em; BORDER-LEFT: #2f6fab 1px dashed; COLOR: #000000; LINE-HEIGHT: 1.1em; PADDING-TOP: 1em; BORDER-BOTTOM: #2f6fab 1px dashed; BACKGROUND-COLOR: #f9f9f9; width: 90%; } PRE.yup { COLOR: #000000; FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif; FONT-SIZE: 12px; text-align: left; width: 80%; margin: 12px auto; } The PRE tag is in a table and i want the long text the same lenght as the short text, but i have no clue how to do it. Any ideas? I have a script that shows the latest lines from my chat. sometimes people will post a super long url or another super long thing without periods ie testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something how can I make css break that up so the browser window won't scroll vertically? Anybody know how to force a long string of text that doesn't contain any spaces to wrap inside its containing div, and not just sprawl outside of the entire page? I've done some searching and can't seem to find a lot of discussion about this particular problem. If the content contained enough spaces, then the overflow would wrap nicely, but there aren't any. What am I missing here? Thanks I have made this input field so people can place their name in there but noticed that when you type into it, the writing begins too close to the left side and I would like to place like a left margin on it by about 5px. This is my input field code on my form: Code: <input type="text" class="field" name="title" size="45" maxlength="200"/> On my stylesheets I placed this: Code: input.field {background-color:#333333; border:none; margin-left:5px; font-family: Arial, Helvetica, sans-serif; font-weight: none; font-size: 11px; color: #000000;}
Doesn't work?? I can't figure out why. I'm having a bit of mental block. How do I achieve the following: 100% width div LEFT SPAN (left aligned) | MIDDLE SPAN (centre aligned) | RIGHT SPAN (right aligned) I thought it was possible in one div rather than having to go the three column layout route? Confused yet? What's the best way to accomplish this? page testimonials.css Main.CSS If you look at the page, you will see that I have the "signature" of the testimonial giver aligned right, but I would like the two p elements to be aligned along their left edge as well (but on the right side of the page, with everything flowing around any images)... I tried floating them right, which and clearing the floats, but then the testimonials don't flow around the images... can this be done without getting divitis? How does one align the text to the left of a div? I have "text-align:left;" specified, however the text is centered when it is too narrow to fill the screen. The URL of the page in question is http://what-is-what.com . If you type an illegal character, such as "=", in the Ask box then the narrow text that is returned appears centered. Other narrow pages on the same site do the same, of course. Tested in Firefox 1.5.0.7 on Ubuntu. hi, i'm wondering whether anyone here knows something that i don't about this... here's some code: Code: <div style="position:absolute; left:30px; top:90px; width:380px; height:80px; border: 3px double #000000; padding:10px; padding-top:5px; line-height:150%"> <table width="380" height="80" border=0 cellspacing=0 cellpadding=0> <tr> <td valign="middle"> <div align="center" style="width:380px;"> <span style="font-size:11px; text-align:left;"> aligned to the left.<BR> but is it centered?<BR> i think not.<BR> </span> </div> </td> </tr> </table> </div> i'm able to achieve vertically centered text in the table cell, and i can center it or align it to the left, but so far in my experimenting i haven't found a way to have text that is aligned to the left, centered in the div. i could always just add a bunch of padding-left on the div so that the text is pushed over and looks nicer although it is not centered, but i'm wondering whether there's a way to do it the way i originally planned to.. thanks very much for looking at this. How do I create centered left-justified text? I want it to look something like this: +---------------SUPPOSE THIS IS MY PAGE---------------+ This paragraph is centered with respect to the page, but note that the text is wrapped around and left-justified within the paragraph. +-----------------------------------------------------+ Can I achieve that with CSS without using tables and manipulating cell widths and cell alignments? . i wish to have two bits of text show as described in subject this is the code i have at present. i know that i have used a style for an image but how do i do this for text ? thanks Code:
<style>
img.floatRight {
float: right;
margin: 15px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 3px;
}
</style>
left text here<b class="floatRight"> right text here</b>
I'm having cross-browser compatibility with my website. On the right hand side I want to have images on the right and text to its left. I've tried variations of html/css but one seems to work with one browser and then not with the other. In safari it looks fine right now. http://www.ryanbuckley.ca/photos/ Can anyone help with this little annoyance? Thanks in advance! Ryan When i float my div to the left, i cant seem to get the text to align right, can someone show me a way out of this horriable predicament i have found my self in!! Hi guys I'm in the process of getting my site together, and it's coming along fairly well. I've been using Firefox for testing, and haven't noticed anything wrong. However, when I checked it in IE8, text that I have explicitly left-aligned is now sitting centred on my page. I have validated the code, and there are no problems. I'm just confused... Here is my code: Code: <span style="text-align:left;">Jarryd Pearson</span><br /><br />
<table align="left">
<tr class="rule">
<td colspan="2">
<hr />
</td>
</tr>
<tr>
<td class="contact">
Phone:
</td>
<td class="contact">
####
</td>
</tr>
<tr class="rule">
<td colspan="2">
<hr />
</td>
</tr>
<tr>
<td class="contact">
Mobile:
</td>
<td class="contact">
####
</td>
</tr>
<tr class="rule">
<td colspan="2">
<hr />
</td>
</tr>
<tr>
<td class="contact">
Email:
</td>
<td class="contact">
####
</td>
</tr>
<tr class="rule">
<td colspan="2">
<hr />
</td>
</tr>
<tr>
<td class="contact">
Postal Address:
</td>
<td class="contact">
####
</td>
</tr>
<tr class="rule">
<td colspan="2">
<hr />
</td>
</tr>
</table>
And here's my CSS: Code: @charset "utf-8";
/* CSS Document */
body {
background: #0d1866;
color: #CCCCCC;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
}
a {
color: #FFFFFF;
text-decoration: underline;
}
a:hover {
color: #FFFFFF;
text-decoration: none;
}
paypal {
border: none;
}
img.footer {
border: none;
width: 88px;
height: 31px
}
td.contact {
vertical-align:top;
}
tr.rule {
padding: 0px;
}
/* DIVS */
div#main {
padding: 2px;
margin: 2px;
}
div#text {
width: 650px;
height: 370px;
vertical-align: top;
overflow: auto;
padding-left: 10px;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 10px;
}
I apologise if this has been posted before. I did a search, and couldn't seem to find this particular issue. If someone has already posted this, please point me in their direction! Thanks Jarryd Trying to achieve this: I'm having trouble figuring out how to float the right ad space correctly. This is what i've got so far: http://gatehouse.graffetto.com/floating_divs.html Code: Code: <html>
<head>
<style type="text/css">
.mainDiv {margin: 0; border: 1px solid black; padding: 10px; width: 600px; float: left;}
.image {height: 100px; width: 100px; background-color: red; float: left;}
.rightAd {float: right; background-color: blue; height: 250px; width: 300px; clear:right; margin-top: 300px;}
</style>
</head>
<body>
<div class="mainDiv">
<div class="image">test</div>
<div class="rightAd">test</div>
<div class="textDiv">
Text content
</div>
</div>
</body>
</html>
I know this is simple i just can't figure it out for some reason.. thanks for any help. |
|||||||