Ok. Here's the situation. I am styling a comments section on one of my websites. Here's an example markup:
<ol class="comments">
<li>
<a href="/view/profile/id/2">
<img src="/images/photo-thumb.gif" alt="johndoe" />
</a>
<p class="pad-top"><em>written on Sunday 2nd of August 2009 12:12:54 AM by johndoe</em></p>
<p class="pad-top pad-bottom">One more comment :D:D:D</p>
<div class="clear"></div>
</li>
<li>
<a href="/view/profile/id/2">
<img src="/images/photo-thumb.gif" alt="johndoe" />
</a>
<p class="pad-top"><em>written on Thursday 30th of July 2009 02:59:48 AM by johndoe</em></p>
<p class="pad-top pad-bottom">Testing comments lalala<br />
<br />
Testing comments lalala<br />
<br />
Testing comments lalala</p>
<div class="clear"></div>
</li>
</ol>
And here is how I'm styling it:
.comments li {
margin-top: 1em;
padding: 0 1em;
background: #3a3a3a;
}
.comments img {
float: left;
margin: 1em 1em 1em 0;
border: 1px solid #4f5055;
}
.clear {
clear: both;
}
.pad-top {
padding-top: 1em;
}
.pad-bottom {
padding-bottom: 1em;
}
Everything works great in all browsers except IE7 where the floated image disappears. To demonstrate, here is how it looks in IE8, Firefox etc (that's how it's supposed to look):
http://richardknop.com/pic2.gif
And here is how it looks in IE7:
http://richardknop.com/pic1.gif
Anybody knows how to fix this? I have already tried floating the anchor instead and many other tricks but I can't get it to work correctly in IE7.
IE7 has some guillotine and BG color bugs, but they're usually associated with using :hover. I don't know if that's what's happening in this case, but the solution is a typical one: give an element layout; specifically, give layout to .comments li.
.comments li {
overflow: auto;
}
This has worked for me when I came across a similar problem:
img {position:relative;}
Not sure about best practices, but I would put the inside of a div block, then float that block.
I would also add clear:both to the .commments li section of the CSS.
Also encountered this problem and found this solution: http://css-class.com/articles/explorer/guillotine/
Related
I have the following HTML code where the subnav div is a collection of div tags that will act as tabs across the featuredexhibit div. Problem is that there is a white space adding between the top of the featureexhibit div and bottom of the subnav tab.
HTML:
<div id="subnav">
<div id="subnavtab">Plan Your Visit</div>
<div id="subnavtab">Tour the Museum</div>
<div id="subnavtab">Program & Events</div>
<div id="subnavtab">Membership</div>
<div id="subnavtab">Donate</div>
</div>
<div id="featuredexhibit">
Featured Exhibit - this can be a rotating menu of exhibits
</div>
CSS:
#subnav { margin-top: 20px; width: 740px; display: inline-block; }
#featuredexhibit { width: 732px; height: 200px; background-color: #A7A9AC; margin: 0; }
#subnavtab { background-color: #A1CD3A; float: left; padding: 10px 10px 10px 10px; margin: 0 5px 0 0; display: inline-block; }
I have tried using the Chrome Developer Tools to find the issue but I do not have any luck or I do not know what to look for.
There doesn't seem to be any problem with your code.
Are you sure no other CSS is conflicting? Make sure the CSS tags you are using are from the last CSS added in the HTML.
For example,
<link rel="stylesheet" type="text/css" href="css-1.css">
<link rel="stylesheet" type="text/css" href="css-2.css">
If there are common tags in "css-2.css", then it will over ride any similar tags of "css-1.css"
You should give a float to the subnav and then clear the featuredexhibit and then only it couldn't save a space between them.
#subnav{float: left;}
#featuredexhibit{clear: both;}
See this Demo
I'm honestly not sure why the white space is there, but I got it fixed in Chrome by removing the inline-block and creating a clear both.
CSS
.subnav { margin-top: 20px; width: 740px; }
.featuredexhibit { width: 732px; height: 200px; background-color: #A7A9AC; margin: 0; }
.subnavtab { background-color: #A1CD3A; float: left; padding: 10px 10px 10px 10px; margin: 0 5px 0 0; }
.clear { clear: both; }
HTML
<div class="subnav">
<div class="subnavtab">Plan Your Visit</div>
<div class="subnavtab">Tour the Museum</div>
<div class="subnavtab">Program & Events</div>
<div class="subnavtab">Membership</div>
<div class="subnavtab">Donate</div>
<div class="clear"></div>
</div>
<div class="featuredexhibit">
Featured Exhibit - this can be a rotating menu of exhibits
</div>
jsFiddle: http://jsfiddle.net/vFFx5/
I know this is old, but since I just ran into this issue I might as well point future visitors to this article: https://css-tricks.com/fighting-the-space-between-inline-block-elements/
The problem seems to be that a new line counts as white space character in a row of inline-block elements. To solve this use floated blocks or flexbox.
i have 2 images.My constraint is that I have to put a new div after the end of the 1st image.But they come on different lines.I googled a lot and found that float:left does the trick
I am already using it,but still they are coming in different lines.I dont know where I am going wrong.
Jsfiddle
span.tab {
padding: 0 50px; /* Or desired space*/
}
.span.tab {
display: inline-block;
float:left;
}
#div23 {
display: inline-block;
float: left;
}
#topdiv1 {
display: inline-block;
float: left;
}
#topdiv3 {
display: inline-block;
float:left;
}
html
<br />
<div id='topdiv1'><div id="widget1" class="sticky1">
<div id='topdiv3'>
<img src="https://lh3.googleusercontent.com/-TrGnsESMpDc/AAAAAAAAAAI/AAAAAAAAAAA/lcUg6MaCxmg/photo.jpg?sz=50" />
<div id='div23'>
<span class="tab"></span>
<img src='https://lh3.googleusercontent.com/-TrGnsESMpDc/AAAAAAAAAAI/AAAAAAAAAAA/lcUg6MaCxmg/photo.jpg?sz=50'/>
</div> </div>
Please help.
You don't apply the float to the parent container. You apply the float to the child elements:
#topdiv3 > * {
float:left;
}
http://jsfiddle.net/samliew/b9TWE/1/
If you want to remove the space between the images, remove the span.
http://jsfiddle.net/b9TWE/2/ this fixes it, you just need to have the <a> containing the first image to float
#topdiv3 > a{
float: left;
}
More on how floats work (great article)
By floating the first <a> containing the image you remove it from the regular document flow. the <div> containing the seconds image will resume the normal flow and position itself next to the <a>
Your topdiv3 must be closed before div div23.
<div id='topdiv1'>
<div id="widget1" class="sticky1">
<div id='topdiv3'>
<img src="https://lh3.googleusercontent.com/-TrGnsESMpDc/AAAAAAAAAAI/AAAAAAAAAAA/lcUg6MaCxmg/photo.jpg?sz=50" />
</div>
<div id='div23'>
<img src='https://lh3.googleusercontent.com/-TrGnsESMpDc/AAAAAAAAAAI/AAAAAAAAAAA/lcUg6MaCxmg/photo.jpg?sz=50'/>
</div>
</div>
</div>
http://jsfiddle.net/arunu/8gvvr/
I've tested it on firefox and it worked the way you did.
But anyway, your html markup is a little bit confuse, doesn´t it?
I've trying to do something that I'm sure is simple, but I can't do it.
All I want to do is have an image and then some text after that image, and be able to control accurately the amount of space between the image and the text.
Here's my code:
<div class="wrap"><div style="width:189px;""position:relative;float:left;top:5px;">
<img src="30000000_1.jpg" style="position:absolute" width="189">
</div>
In my style sheet, wrap has these attributes:
.wrap {
/*text-align: left;*/
width: 1100px;
height: 870px;
background-color: white;
color: black;
padding: 10px;
margin: auto;
}
I want my text to look like this directly below the image:
Username
Age
Location
Currently, I just add loads of break tags to control where I have the text, but that's messy and there must be a better way.
Thanks in advance for any help.
<div class="wrap">
<div style="width:189px;position:relative;float:left;top:5px;">
<img src="30000000_1.jpg" style="position:absolute" width="189" />
</div>
<br clear="all" />
<div id="bottomText">
Username
<br /><br />
Age
<br /><br />
Location
</div>
</div>
CSS:
.wrap {
/*text-align: left;*/
width: 1100px;
height: 870px;
background-color: white;
color: black;
padding: 10px;
margin: auto;
}
#bottomText{
margin-top: 10px;
}
Change margin-top: 10px to the desired distance.
Change bottomText to a class rather than an id, if you plan on having more than one.
(Note: I removed your "" from the second div because I'm not sure why that was there.
Check this solution jsfiddle. Personally I will not use inline style, because it becomes more messy. I have used <ul> for the text. This can give you better control over the position of the text.
Just use an Unordered List for the text since it is a list. ul are "block level elements" so they will self-clear. And definitely use an external stylesheet vs. inline styles. External is much cleaner and easier to work with and make changes to. Example: http://jsfiddle.net/codeview/Fk3EK/
HTML:
<div class="wrap">
<img src="30000000_1.jpg">
<ul>
<li>Username</li>
<li>Age</li>
<li>Location</li>
<ul>
</div>
CSS:
.wrap {
/*text-align: left;*/
width: 1100px;
height: 870px;
background-color: yellow;
color: black;
padding: 10px;
margin: auto;
}
ul { list-style-type:none; }
li { padding:5px 0; }
I can't get it to work. Probably because you guys can't see the other code I have going on. But maybe I was approaching the problem in the wrong way.
Here's my code before I started fiddling with css positioning:
<br><br>
<div class="imgleft">
</div>
<br><br><br><br><br><br><br><br><br><br><br>
<span style="font-weight: bolder;font-size: 12px;"></br><br><br></br>
<font color="green"> User69 </font> <img src="online01.gif" alt="" border="0" style="float:center"><br>
Location:
<script language="JavaScript" src="http://j.maxmind.com/app/geoip.js"></script>
<script language="JavaScript">document.write(geoip_region_name());</script></span>
</script></br>
<br><br>
The problem is, the images have a set width, but vary in height, so sometimes I'll use 8 break tags, other times 7, but the exact distance beneath each image (where the text goes) is different. And it looks bad.
There are 3 images on the page, so it goes image, text (well, there's an image as well, flashing gif) below image, then another image with text below it, and so on. From top to bottom on the left of the page.
Here are the relevant bits from my css:
.imgleft {
float: left;
width: 120px;
}
.imgleft img {
clear: both;
width: 175px;
padding-bottom: 0px;
}
I'm certain I'm making this way more complicated than it needs to be! Sorry.
I've put a link to my code in the comments to the first answer, if someone could take a look. Thanks.
So I'm simulating a table layout with a div and a couple spans inside it. I'd like the span on the right to indent any text that wraps. I've tried a few things and can't get it to work. Any help would be appreciated.
jsFiddle: http://jsfiddle.net/2Wbuv/
HTML
<div class="display-element">
<span class="display-label">Field 1</span>
<span class="display-field">This is my string of data, some times it is pretty long. Sometimes it is not. This one is.</span>
</div>
<div class="display-element">
<span class="display-label">Field 2</span>
<span class="display-field">This is another string of data.</span>
</div>
CSS
.display-element {}
.display-label {display: inline-block;
width: 100px;
padding-left: 5px;}
.display-field {display: inline;}
Check this out: http://jsfiddle.net/2Wbuv/2/
.display-element {
}
.display-label {
display: inline-block;
width: 100px;
padding-left: 5px;
}
.display-field {
display: inline-block;
padding-left: 50px;
text-indent: -50px;
vertical-align: top;
width: 200px; /* for testing purposes only */
}
<div class="display-element">
<span class="display-label">Field 1</span>
<span class="display-field">This is my string of data, some times it is pretty long. Sometimes it is not. This one is.</span>
</div>
<div class="display-element">
<span class="display-label">Field 2</span>
<span class="display-field">This is another string of data.</span>
</div>
It sounds like you want a hanging indent. CSS something like this should do the trick:
.hanging-indent
{
text-indent : -3em ;
margin-left : 3em ;
}
But since your <span> is an inline element, the text-indent property, as well as other CSS properties pertaining to a block, is meaningless.
The CSS 3 draft specifies a hanging indent. If supported by Browsers, the following should work:
.hanging-indent
{
text-indent: 3em hanging each-line;
}
Unfortunately neither hanging nor each-line values are currently supported in modern browsers as the specification for CSS Text Module Level 3 is still a Draft.
The feature is implemented with a browser specific prefix for WebKit and Chromium. For Firefox there is an open Bug you may vote on.
I have a strange bug when looking at my homepage in Chrome. The bug doesn't seem to appear when I try to edit it with CSSEdit:
I attached the pictures to show you what I mean. Those "points" next to the icons are linked as well.
What could be causing this error?
Thanks for the help!
EDIT sure here's the code (the page isn't online):
<div class="rss">
<p>
<a href="http://linkto">
<img src="/images/facebook.png" alt="Find me on facebook" />
</a>
<a href="http://linkto">
<img src="/images/twitter.png" alt="Follow me on twitter" />
</a>
<a href="http://linkto">
<img src="/images/rss.png" alt="Subscribe to RSS Feed" />
</a>
</p>
</div>
which is wrapped in a div class called footer. And the CSS
.site .footer {
font-size: 80%;
color: #666;
border-top: 4px solid #eee;
margin-top: 2em;
overflow: hidden;
}
.site .footer .rss {
margin-top: 0em;
margin-right: -.2em;
float: right;
}
.site .footer .rss img {
border: 0;
}
Sorry for the strange formatting.
Those "points" are the text-decoration:underline portion of your CSS being applied to <a> tags. The reason you only see part of it is because the image you are using is covering the majority of it.
Try putting this in your CSS:
.rss a { text-decoration:none }
.rss a img { border:none; outline:none }