<div class="wholediv">
<div class="rightdiv">
<strong>Your Company Name</strong><br />
Evergreen Terrace 742<br />
Kansas Missouri<br />
Phone: 432-653-3121<br />
sales#thetiecompany.com </div>
<div class="sitemap">
Home | Sitemap | Contact Us</div>
</div>
</div>
div div.wholediv
{
height:97px;
width:500px;
float:left;
background-color:#F0F0F0;
}
div div.sitemap
{
background-color:#F0F0F0;
position:relative;
float:right;
width:200px;
height:87px;
padding-right:10px;
padding-top:10px;
font: 0.7em Tahoma, sans-serif;
font-weight:bold;
}
div div.rightdiv
{
float:left;
position:static;
background-color:#F0F0F0;
width:200px;
height:87px;
padding-left:10px;
padding-top:10px;
font: 0.7em Tahoma, sans-serif;
}
IE displays like this.
Chrome displays like this.
You have a block-level element that has both a width and padding. That's at least one thing that's going to cause trouble in IE because of the different box-model.
More info about box models: http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug
edit after you added the images:
atleast position: static & position:relative shouldn't be needed here the way you're using them. You could start debugging by removing padding from the elements. Padding is probably the thing in IE that breaks the "sitemap"-row.
You're not including in the code the part that has the logo-image etc so can't comment on that part. I think you should read about the box-models and apply that. Also it the way position is used looks quite random, so you could study that a little bit. More info in about positioning in http://www.quirksmode.org/css/position.html
Related
My html code is
<html>
<body id="body">
<div id="content">
<div id="head1">
<h3 id="cpsir">CPSIR-CM</h3>
</div>
</div>
</html>
Css code is
#body{
background:#0F657D;
}
#content{
width:1000px;
height:740px;
background:#E2E2E2;
margin-left:auto;
margin-right:auto;
}
#head1{
width:auto;
height:60px;
background:#626262;
margin-top:-10px;
}
#cpsir{
font-family:Verdana, Helvetica, sans-serif; font-size:24px;
color:#F4F4F4;
padding-top:10px;
}
I'm trying to fit the head div tag to the top of the body. But which is not fit perfectly. So, I'm used the negative px for it., but which result is differ to the different browser. For example, In the torch browser margin-top:-10px gives what i expect , which is change into the Internet Explorer. What can i do?
Start with:
html, body{
margin:0;
padding:0;
}
And then you shouldn't need the negative margin on #head1
A starter tip i got once when optimizing for different browsers:
*{
margin:0px;
padding:0px;
}
that way all elements are rendered the same in every browser, since IE have one way of putting small margins here and there, as do Firefox, Chrome, etc.
You can just put margins on elements afterwards
I have an issue I can't figure out. I'm hoping for a CSS expert:)
http://pensacolachiropracticspinalcenters.com/
I've created a bootstrap carousel. The html blocks go like this.
<div #HomeBannerPane> (position:relative)
<div #home-carousel></div>
<div #HomeBoxWrapper (position:absolute;)
<div #HomeBoxFirst></div>(.homebox float:left)
<div #HomeBoxFirst></div>(.homebox float:left)
<div #HomeBoxFirst></div>(.homebox float:left)
</div>
</div>
Actual CSS
/*Home Carousel and 3 Green Boxes*/
#HomeBannerPane{position:relative; left:-16%;}
/*#home-carousel{position:relative;}*/
#HomeBoxWrapper{
width: 75%;
position:absolute;
bottom:0px;
left:16%;
z-index:10;
}
.homebox{
width:33%;
float:left;
max-height:340px;
min-height:159px;
padding-top:21px;
padding-right:30px;
padding-left:30px;
padding-bottom:30px;
overflow-x:hidden;
overflow-y:hidden;
color:#FFFFFF;
}
.homebox h2{margin-bottom:15px;}
.homebox p{
color:white;
font-family: 'Source Sans Pro', sans-serif;
font-size:13px;
}
#HomeBoxFirst{background:#7CBA3D;}
#HomeBoxSecond{background:#43A140;}
#HomeBoxThird{background:#008238;}
I have the bottom of #HomeBoxWrapper zeroed out to the bottom of the #HomeBannerPane which is where the Carousel fits into. #HomeBannerPane has a z-index to sit on top of the carousel.
The problem I am having is when the slides rotate, it kicks the #HomeBoxWrapper and all three boxes down during the transition. I am completely stumped. I really need it to quit doing that. Any suggestions?
Thanks
If you make .carousel-inner height a bit smaller, say 660px instead 667px then the #HomeBoxWrapper not kick the three boxes inside it.I don't know exacly why, but i tested with Firebug and it works on Firefox 32. Hope it help.
I don't know how to call it exactly, these are the example i am working on.
Is is possible to make all of this using html and css on the sqaure and triangle part
or it is better just to use images
Yes it possible to make it using pure css but
it shows different result for different browser. i Better suggest you to take help of css and image.
<div class="firstDiv">
<div class="secondDiv"></div>
<div class="arrowDiv"></div>
</div>
apply following css
.firstDiv { float:left; height:25px; width:200px;}
.secondDiv{ float:left; height:25px; width:170px; background:#666; font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:25px; color:#FFF;}
.arrowDiv { float:left; height:25px; width:25px; background:url(images/arrow.png) left no-repeat;}
I have a series of divs which contain a small paragraph of text. I would like to make all the divs of the same height and vary the width as required to fit the paragraph.
If I was to do this in the vertical direction I would just set the width of the div. But if I set the height the paragraph turns into one line making the box as wide as possible.
How to I force the paragraph to have as many lines as the height will allow then increase in width as required
I have tried using min-height:100px for the paragraphs but the left over height is filled with white space and the text is still on one line.
Here is an example off what I am trying to do. As you can see the text is staying on one line. I would like to make it file the box vertically before making the box wider.
jsfiddle link: http://jsfiddle.net/Kj49B/
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<ul class="container">
<li class="item">
Title 1
<br/>
<p>A summit aimed at reducing the risk of nuclear terrorism and involving some 50 countries is about to open in South Korea's capital, Seoul</p>
</li>
<li class="item">
A long title
<br/>
<p>Watch the latest news summary from BBC World News. International news updated 24 hours a day</p>
</li>
<li class="item">
A much much longer title
<br/>
<p><img src="http://www.montrealgazette.com/6355281.bin" align="left"/>Freshly crowned NDP leader Thomas Mulcair has vowed to make Prime Minister Stephen Harper's Tories his main adversary and he moved quickly to assure his own party that there won't be a housecleaning of staff</p>
</li>
<li class="item">
A long title that goes on and on until it is very very long
<br/>
<p>Pope Benedict XVI condemns drug-trafficking and corruption at a huge open-air Mass in central Mexico as part of his first visit to the country</p>
</li>
</ul>
</body>
</html>
Here is the CSS that goes with it:
body
{
font-family:sans-serif;
}
.container
{
width:95%;
margin-left:auto;
margin-right:auto;
align:center;
}
.item
{
margin-left:auto;
margin-right:auto;
display:inline-block;
color:#000033;
font-size:14px;
height:180px;
line-style:none;
float:left;
margin:20px;
padding:20px;
vertical-align:middle;
border:1px solid #000033;
border-radius: 50px; /*w3c border radius*/
-webkit-border-radius: 50px; /* webkit border radius */
-moz-border-radius: 50px; /* mozilla border radius */
}
.title
{
color:#000033;
text-decoration:none;
font-size:22px;
margin:0px;
padding:0px
line-height:1;
}
img
{
height:90px;
margin: 5px;
}
p
{
display:block;
margin:5px;
width:minimum;
padding:0px;
min-height:80px;
line-height:1.2;
word-wrap:true;
}
You can't using CSS. There is nothing I've ever come across even in CSS3 that supports this natively. What you're asking for is that width:auto act like height:auto but it won't because auto height is based on the concept of line boxes and there is no such thing as a "column box" (because text isn't a grid).
Tables with fixed height cells are the closest you'll get but you say in the comment above they don't suit you for other reasons. Even then you'll find the behaviour isn't particularly consistent or easy to control.
You can do this using javascript by detecting boxes that exceed a certain height then progressively making them wider until they don't. If javascript isn't an option either then I believe you are out of options.
Hi you just have to give the width & height auto in your css that will work fine according to your requirement.
see your updated css :-
body
{
font-family:sans-serif;
}
.container
{
width:auto;
margin-left:auto;
margin-right:auto;
align:center;
}
.item
{
margin-left:auto;
margin-right:auto;
display:inline-block;
color:#000033;
font-size:14px;
line-style:none;
float:left;
margin:20px;
padding:20px;
height:auto;
vertical-align:middle;
border:1px solid #000033;
border-radius: 50px; /*w3c border radius*/
-webkit-border-radius: 50px; /* webkit border radius */
-moz-border-radius: 50px; /* mozilla border radius */
}
.title
{
color:#000033;
text-decoration:none;
font-size:22px;
margin:0px;
padding:0px
line-height:1;
}
img
{
height:90px;
margin: 5px;
}
p
{
display:block;
margin:5px;
width:minimum;
padding:0px;
line-height:1.2;
word-wrap:true;
height:auto;
}
OR See the fiddle:- http://jsfiddle.net/Kj49B/7/
You should have this:
div {max-height:100px;}
p {height:100%;}
Leave the width unspecified. Of course, you could easily replace div and p with ids or classes if you wanted to.
My answer may not be valid since I saw your code sample after I posted this answer. I'll leave this up here in case it may be of some help.
I came across a problem and I tried searching on google and here too, however, could not get the right solution. Let me be brief...
I have a div name #email_input_box which contains <input type="text" class="email_box" border="0" style="padding-left:10px; padding-right:10px; margin:0; border:0;" />
The issue is in padding the text, it works fine in other browsers, however, it does not work in IE7.
Here's my .email_box class styling
.email_box{
width:160px;
height:26px;
background:url(images/inputbox_email.png) no-repeat;
line-height:26px;
color:#969595;
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
font-style:normal;
}
and here's my div #email_input_box styling
#email_input_box{
width:180px;
height:26px;
float:left;
position:absolute;
top:60px;
}
I need help with the padding-right issue in IE7. Thanks!
input doesn't have a border attribute, remove it.
<input type="text" class="email_box" style="padding-left:10px; padding-right:10px; margin:0; border:0;" />
this may solve the problem. however even if it doesn't, it should be removed.
Also the div containing the input have a less width than the input.