I have this simplified code:
<div class="container">
<input type="submit" name="submit" class="submit" value="Sign Up">
</div>
And the CSS for it:
input.submit{
padding-left: 40px;
padding-right: 40px;
float:right;
}
.container{
background-color: #AAA;
float:right;
padding: 50px;
}
I expect the div to wrap around the input button, float to the right, and its size is equal to the button's size + the padding (50px). In other browsers it works perfectly, but there are 2 strange things happen in IE7:
The width of the div stretches to the whole webpage. If I remove float:right from CSS of input.submit, then the size of the div is correct.
The input button's width is also much larger than when the button is displayed in other browsers.
This is the doc type I use:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Anyone know why these problems happen and how to solve them?
I don't see why you need float: right on input.submit, so just remove it. If there is a reason you need it, you'll have to show me why - there might be a workaround.
To fix the second problem, add overflow: visible to input.submit.
After those two changes, it looks virtually the same in IE7 and IE9: http://jsfiddle.net/33vmm/
Related
Sorry for messing my code soo much.this is my first experiment. Doing it all with the help of google. So, Can you tell me how to write the following code in an efficient way and also, I want to pull the text up in the heading block. Help me.
<!DOCTYPE html>
<html>
<head>
<title>
seVen
</title>
<style>body{background:#A8A8A8;color:white;}
.heading{background:#303030;position:fixed;border-radius: 25px;top:10px;
right:2px;left:2px;bottom:85%;padding:10px;}
.login{position:relative;float:right;top:150px;bottom:145px;}
.padding{padding-left:30px;padding-bottom:30px;position:relative;}
</style>
<div class="heading"><div class="padding"><p style="font size:30px">seVen</p><p style="font-size:15px">Own your imagination</p></div></div>
<body>
<div class="login">
Enter your name <input type="text" id="name" /><br><br>
Password <input type="password" id="password" />
<br><br>
<input type="button" id="submit" value="Submit"/>
<input type="button" id="pwdForgot" value="Forgot Password"/></head>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><hr>
About Products
</body>
</html>
At the moment, the height of .heading is based on position:fixed;top:10px;bottom:85% which makes it a specific height which changes as you resize the page vertically. You could replace bottom with height and it will look more consistent.
You can then add line-height to put the text in the middle of the block:
.heading{
background: #303030;
border-radius: 25px;
padding: 10px;
position: fixed;
top: 10px;
bottom: 85%
height: 80px;
line-height: 80px;
}
Other suggestions:
You may consider changing fixed positioning (position:fixed;top:10px;right:2px;left:2px;) to specific widths and margins:
.heading{
background: #303030;
border-radius: 25px;
padding: 10px;
height: 80px;
line-height: 80px;
width: 98%;
margin: 1%
}
The differences with removing position:fixed is it won't scroll with the screen, and it will push everything else on the page below it.
Also, instead of using <br><br><br>... and ... try setting margin and padding:
<div style="margin-top:20px;margin-left:50px">Own your imagination</div>
(you may find display:inline-block, float:left, or float:right useful at this point if you end up changing the page a lot using these)
And your footer could make use of position:fixed if you want it to stick to the bottom of the page, something like:
<div style="position:fixed;bottom:10px;left:0;right:0;border-top:solid 1px white">
<a class="padding">About</a>
<a class="padding">Products</a>
</div>
Try to use margin-bottom
Example:
.heading .padding
{
margin-bottom: 10px;
}
There are a few very major issues with your markup:
Your div with class heading is outside of your body tag - all the content in your html file should be within your body tags.
Your head tag closes near the bottom of your document - the head tag always needs to close before your opening body tag.
You can't rely on characters and br tags to space your content - You need to use padding and margins.
You should find that once you've re-structured everything, that some of your issues should be fixed.
Also, the main reason that your 'own your imagination' text isn't on the same line, is because by default p tags will always start a new line.
Follow this basic html layout to restructure what you've got so far, following my points above:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style>
</style>
<body>
<!-- all your content needs to go in here -->
</body>
</html>
And then in your header, if you change your p tags to span tags and give them a style of display: inline-block, you'll be able to space them how you would like with some padding.
Also, generally speaking, it's better practice to link to an external stylesheet instead of using inline styles or including your css in style tags in the head, but concentrate on what you've got so far.When you feel confident, you can have a look at this:
Linking to an External Stylesheet
I also highly recommend using CSS Tricks as a general resource going forwards, there's some great stuff on there that should really help with structuring and layout.
I made a simple way to display help text that looks like a popup window using only CSS. It works good except by default the popup window is left justified. I would like the window to be closer to the icon itself like what (in my example) "left: 360px;" would show. Since the position of the hover icon may change, does anybody know of a way of setting the position of the popup window based on the position of the hovered over icon? We use jQuery and Prototype but I'd prefer to use only CSS so the same code could be used on either type of page. Thanks.
Here's my example:
EDIT: This was already answered but here's the fixed code in case anybody else is looking for an easy way to display a popup message when hovering over an icon. Also, here's an example of it on jsfiddle.net so you can easily try it out: http://jsfiddle.net/zDADW/
By the way, if anyone knows why someone would rank this down one (as of this writing someone clicked the down arrow for this question), please let me know.
<!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" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Show help text when hovering using CSS</title>
<style type="text/css">
#help:hover #help_popup {
/*If you hover over the help icon, show the help_popup span*/
display: block;
}
#help {
/*This is the part I was missing*/
position: relative;
}
#help_popup {
/*Normally, hide this span*/
display: none;
position: absolute;
width: 15em;
padding: 10px;
background: #CFF;
color: #000;
border: 3px solid;
text-align: center;
left: 10px; /*this is still needed even if it's 0*/
}
</style>
</head>
<body>
<div>
This shows a popup window using CSS when you mouse over an image.
<div>
Hover over the question mark for a popup help window.
<span id="help">
<img src="questionmark.png" alt="[?]"/>
<span id="help_popup">
This is the normally hidden help text.
<br/>It only shows up when you hover over the question mark.
</span>
</span>
</div>
</div>
</body>
</html>
Add #help { position: relative; } to your CSS. This will allow the absolutely positioned element to calculate it's position relative to the #help element. You'll probably find that you want to decrease the left property once you make this change.
jsFiddle demo
The following are 2 div, side by side. But once a width: 100px is added to #right, they won't be side by side any more. The second div will wrap to the next line. The browser's width is like 1200px, so it is not a concern, and this happens on both Firefox and Chrome. What is a reason for that?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<style>
#left {
width: 100px;
float: left;
}
#right {
}
</style>
<div id='left'>
hello
</div>
<div id='right'>
world
</div>
Floats are funny things in CSS. They can easily cause this kind of confusion.
I recommend using display:inline-block; (on both the divs) instead of float:left; in your example. It'll probably behave closer to how you're expecting.
Add float:left to the #right, it will fix the problem. Divs are positioned on new lines if the float is not specified.
I have a div which contains an a with some border. See:
http://webnumbr.com/all
It works great in FF and IE, but why doesn't the right hand side render in Chrome? Is it invalid CSS? (testing in chrome OSX if that matters)
Test case: Included so this question still makes sense after the content at the given URL changes:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head><style type="text/css">
div {
float: left;
clear: left;
margin: 3px;
}
span {
border: 1px solid;
}
</style></head><body>
<!-- does not show right border -->
<div><span>With trailing space, no width </span></div>
<!-- does show right border -->
<div><span>No trailing space, no width</span></div>
<div style="width: 40ex;"><span>With trailing space, has width </span></div>
<div style="width: 40ex;"><span>No trailing space, has width</span></div>
</body></html>
Verified in Google Chrome 4.0.266.0 (Official Build 33992) with WebKit 532.6.
I can't tell you the reason why this is happening, but I think I have a fix for you. You have spaces padding your link content, and apparently Chrome isn't handling this very well.
If you remove the extra spacing around the contents of the <a> tags, the problem disappears (I did this in the Chrome inspector tool). So, change:
4,481
to:
4,481
Chrome must handle the space in an odd manner when dealing with a float (if you remove the float property on the search_data class, the border appears as well).
This looks like IE8 issue. I have two divs that are side by side because I float one of them to left. However, if the content inside of right div gets too big for the window, the right div breaks line and goes under left div. How do I make both divs stay on same level, side by side?
Here is the code:
css:
<style type="text/css">
#left_div
{
float: left;
width: 250px;
height: 400px;
border: solid 1px red;
}
#right_div
{
width: 3000px;
border: solid 1px blue;
}
</style>
html:
<div id="left_div">
text in left_div
</div>
<div id="right_div">
text in right_div
</div>
Add float: left to the right_div as well.
If it is anything similar to the examples shown by Matthew James Taylor and his Perfect 2 Column Left Menu take a look at how he is doing it and maybe copy it!
IE has in the past also had the issue that it took height and width to mean height-min and width-min, thus still allowing boxes to resize eventhough they had specific limits set. See Webcredible's article, most notably number 2 on their list!
You can also add a left margin of at least 250px (the width of the left_div) to the right_div, that way there will always be space for the left_div next to the right_div.
change the doctype: (IE8 needs it to render correctly the webpage)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd " > <html xmlns="h t t p://w w w.w3.org/1999/xhtml" xml:lang="en-GB">
(I edited the urls with whitespaces so don't forget remove them :) )