float: right in IE7 dropping to a new line - css

I've been stuck on a float issue for a little while so I am hoping the community can help me again. I have a new webform here. As usual it looks fine in everything but IE7 (or IE8 in compatibility).
For some reason some of the containers are ending up with the form field on a new line below the form text. CSS is not my strong point, otherwise I'd be able to fix this I am sure. Can anyone tell me what I am missing here?
I tried adding float: left to the form text but that ended up with a whole other mess.

Try to small change markup: place items with a float before items without it (from the same row). It should help.

I know it's been a long time since this was posted, but I found a solution that I like for this. The gist is using 'expression' tag in your CSS for IE7 only to move the floated element to be the first element of the parent in the DOM. It will be semantically correct for all other browsers, but for IE7 we modify the DOM to move the floated element.
In my case, I have:
<div>
<h1></h1>...<p>any other content...</p>
<small class="pull-right"></small>
</div>
In my CSS for pull-right, I use:
.pull-right {
float:right;
*zoom: ~"expression( this.runtimeStyle.zoom='1',parentNode.insertBefore( this,parentNode.firstChild ))";
}
The result is that IE7 moves my <small> to be the first element of <div> but all other browsers leave the markup alone.
This might not work for everyone. Technically, it is modifying the markup but only in the DOM for IE7 and it's also a javascript solution.
Also, I understand there may be some performance issues with expression (it's slow), so perhaps it's not ideal there are a lot of floats like this. In my case, it worked well and allowed me to keep semantically correct HTML.

If you float your .formText left, float your span.required left, and then float your inputs left as well you should be able to line them up on the same line.
I'd modify your markup a bit. your <span class="formText"> should really be a <label>
For example:
<P class=formRow>
<label for="FirstName">First Name<SPAN style="FLOAT: left" class=required>*</SPAN></label>
<INPUT id=FirstName class=formTextbox name=FirstName>
</P>
and your css would be something like this:
.formRow {
clear: both;
}
.formRow label {
float: left;
width: 150px;
}
.formRow input {
float: left;
}

You could try to make the span tags you have for the text a fixed width, float them left, and do the same for the input field you want to correspond with. I'd also recommend using a label tag instead of a span tag on forms. No real solid reason for it, it's just that a label was meant for exactly what you have the span tag doing.

What you want to do is add a clear:both as the last sibling of your floated elements.
So something like:
<div style="float:left;">
<!-- children of div here -->
</div>
<div style="clear:both;">
<!-- leave empty -->
</div>

Related

CSS column property

So I noticed the column property doesn't work in internet explorer so I tried finding alternate ways to create columns, I found a way to do it with tables, but that looks a bit clunky. Is there a way to use divs and create two vertical columns splitting the page?
You can do this easily with floats. e.g.:
HTML:
<div class="col1">Column1</div>
<div class="col2">Column2</div>
CSS:
.col1 { width: 50%; height:100px; float:left; background:#ddd}
.col2 { width: 50%; height:100px; float:left; background:#777}
Demo: http://jsfiddle.net/AfgAG/9/
You can put two div tags next to each other and give one the float:left CSS property, and the other float:right. Both of those divs must be at the same level in your DOM tree. What I mean by that: basically, both div tags must be 'next' to each other when you write the HTML, so that one is not inside of a tag that the other is not. For example:
<div> stuff </div> <div> more stuff </div> is okay, but
<div> stuff </div> <div> <div> more stuff </div> </div> would require the outer div tags to be labeled with float:left or float:right, not the inner div that directly contains 'more stuff'.
Hope that helps!
You can use column-count although not in IE before 10. With prefixes it works in everything else.
Is float not working for you?

Place text and image in different line

I have a code like
<span ><img src="xxx.png">Tab1</span><span ><img src="yyy.png">Tab2</span>
This code creates two tab but the only problem is that tab1/tab2 and image xxx/yyy are in same line.I want them to be in different line and i want both span element in same line.
The tabs should look like this
Float:left property of css would be beneficial in doing your work
You may be using the wrong element. <span> is use for inline content, whereas <div> may be better suited to what you're trying to do. You want them on a new line, but span is specifically created/used for non-line breaking items.
Try this:
<div><img src="xxx.png">Tab1</div><div><img src="yyy.png">Tab2</div>
More info on What is the difference between HTML tags <div> and <span>?
I take the markup for granted:
img { display: block; }
span { float: left; }

Two div element next to each other (For page header)

I am trying to make something look like following (don't concern color here. my concern here is the shape);
I tried something with following code but didn't succeed!
<html>
<head>
<style type="text/css">
#header{border:3px solid gray;padding:10px;}
#header-left-container{border:1px solid gray;float:left;width:30%;}
#header-right-container{border:1px solid gray;float:right;width:69%;}
</style>
</head>
<body>
<div id="header">
<div id="header-left-container">
pooo
</div>
<div id="header-right-container">
bla bla bla.....
</div>
</div>
</body>
</html>
I know this can be done with table easily but I don't wanna use table in my application where I can do the same with div elements.
any suggestion here?
http://jsfiddle.net/j4DnG/7/
What you need to do is clearing the area arround the 2 floated divs.
Doing this by modern technuiqe is giving the parent the property of Overflow:Hidden or Auto (what ever fitting you more. I recommend hidden)
In the past people user clearfix (google on that). Todays we use that approach.
As well people used to put clear:both after the creation of the two elements. That has a negative side- 1 more element in the dom.
You need to add overflow:auto; to the #header css; without that divisions don't expand to contain floated elements.
your code looks fine...
suggestions:
Just Add clearfix after floating divs so as they will be contained inside the parent object like:
<style>.clarFix{clear:both;}</style>
<div class="clearfix"></div>
Add
<br style="clear:both" />
after second div. Or make the container div float: left. Or use one of the css frameworks if You don't want to become css master before You create a webpage. One is http://960.gs/
Do you use firebug? go on twitter.com and see how they have defined a left and a right container is the style sheet . They're not using table to implement it. just div
Just replace the float: right; declaration with a margin-left: 30%; declaration for #header-right-container. You don't need to float both of them. This way, you will only need to clear floats if the left block is taller than the right block. See this fiddle.

css - hidden div has large white space in its place in IE

Any ideas how I get rid of white space on my IE browser. It is caused by a hidden div. When I remove the div the white space goes. Works fine in FF.
Here is the DIV:
<div class="hidden" id="popup">
<div>
<H1 class="center" id="popupTitle"></H2><br/><br/><br/>
<div style="position:relative; display:inline;">
<p id="popupText" style="float: left"></p>
<img id="popupImage" style="float: right"></img>
</div>
</div>
</div>
Here are the styles associated with it:
.ofCommunications .hidden { display:none; visibility: hidden; }
I am also trying to get the p and the img inside the third div to display on the same line but that doesn't seem to be working either.
Thanks in advance
Caroline
The spacing problem is most likely caused by your improperly closed tag ("") as well as using both display: none; and visibility: hidden;
Visibility will cause the element to still take up space so you need to get rid of that style.
If you make those adjustments it should work unless you have other issues not seen in the code provided (for example: your parent container to .hidden having a misspelled class name).
Tips:
Never create space with < br/ > tags. They're only used for breaking text.
Get rid of display: inline; and position: relative; on your other < div > as it doesn't make sense to have it there (relative positioning is default).
Lowercase all of your tags. Uppercase tags are a thing of the distant past and not ideal.
A couple of comments. Once you clean this up it might help to resolve this and other future headaches:
Remove your inline styles and put them in a stylesheet.
What is that second div doing under the hidden div? It looks redundant and unnecessary to me. Remove it.
If you're floating elements then you'll need to clear them down the track. This could be why you have things floating in the wrong spots.
Have you display:block'ed the p element next to the image and given it a width? Otherwise it's not going to float anyway.
Your h1 should not be uppercase.
Hope those few suggestions help out a bit.
Try this to get the <p> and <img> lined up:
<div>
<p id="popupText" style="float: left"></p>
<p style="float: right"><img id="popupImage" /></p>
</div>
I removed the position: relative because it's not needed with the code you provided, and the display: inline because it doesn't make sense to make the div inline.
Have you checked the widths of the parent elements? If a width is set too small on a parent element there will not be enough space to render your paragraph and image on the same line. This could cause your paragraph and image to render on different lines.

Surrounding all content in div with span - why?

In code we got from a "psd2html"-service, I see a lot of spans surrounding the contents of div-tags.
I know the difference between spans and divs, but I cant figure out why the code looks like this:
<div class="forgot-password">
<span>Forgot password?</span>
</div>
...
<div>
<span>Sign in</span>
</div>
Instead of just:
<div class="forgot-password">
Forgot password?
</div>
...
<div>
Sign in
</div>
I'm guessing its either some kind of cross-browser fix, or perhaps to "prepare" for the future if we want to put more stuff into the divs?
Edit:
Here is the CSS for the forgot-password part:
div.forgot-password
{
float: left;
width: 145px;
height: 22px;
margin-left: 3px;
}
div.forgot-password span
{
display: block;
float: left;
padding-top: 3px;
padding-left: 0px;
}
div.forgot-password span a
{
color: #C5C5C5;
text-decoration: none;
}
Although plain text can be "naked" in a div, some consider it good practice to wrap text content with an inline tag such as a span. This means you can separate out inline styles from block styling. With respect to your psd2html service, what you are seeing is an artefact of the conversion algorithm. Any algo is only going to have a finite set of rules. In this case I am guessing there is a rule like "wrap text in a span", and a rule like "wrap links in an a". In your example above, all your text content is a link, so you are seeing
<span><a..>text content</a></span>
From an HTML perspective, in this case the outer span is unnecessary. However it doesn't do any harm, and for styling purposes - unless you want to change the css - you need to keep them in.
To me it looks like overly complicated code. It would make sense if the code was:
<div class="forgot-password">
<span> some text </span> Forgot password?
</div>
So that you can discriminate text and links in CSS or jQuery.
Here we should look at the CSS to see what is done, but my first impression is that the span's could be removed since they add no semantic nor operational meaning.
To me, span has always been a way of quickly formatting text in a css compliant way. So I would suppose that they add spans to prepare for further formatting, but as no formatting is given, they don't apply any stylesheets, thus the span is "empty".
I'd say that these spans could as well be removed. They don't hurt in that case, but they don't have any use here.
It looks like these are buttons being marked up here, so it might be used for the Sliding Doors technique, so you can have two background images, so that if the content grows, you'll still have nice corners. It's probably just something they do on all things which look like buttons, but they might not use it to its full potential everywhere.

Resources