I have a little CSS problem. This occurs in IE, FF and Chrome. However on the iPhone Safari browser, it looks fine. The problem is that the second 'block' span tag (id="myDiv") does not float to the left as the first block span tag does, it has a padding to the left of some sort, which I never applied. How can I remove that padding to the left of the id="myDiv" span tag?
<head>
<style>
.plansHeader{
font-weight:bold;color:rgb(73,102,145);font-size:12pt;margin-bottom:6px;line-
height:14pt;
}
</style>
</head>
<body>
<span style="display: block">
<img src="http://m.v4m.mobi/uni/thumbs/arrow.png" border="none" style="vertical-align: middle; float: left;"/>
<span id="plansHeader">e-phone to e-phone calls: R0.40 p/m</span>
</span>
<span id="myDiv" style="display: block">
<img src="http://m.v4m.mobi/uni/thumbs/arrow.png" border="none" style="vertical-align: middle; float: left;" />
<span class="plansHeader">0 minutes call time included(to Any mobile/landline)</span>
</span>
</body>
Thanks You
add this after your span :
<div style="clear:both;"></div>
It's should look like this:
<span style="display: block">
<img src="http://m.v4m.mobi/uni/thumbs/arrow.png" border="none" style="vertical-align: middle; float: left;"/>
<span id="plansHeader">e-phone to e-phone calls: R0.40 p/m</span>
<div style="clear:both;"></div>
</span>
<span id="myDiv" style="display: block">
<img src="http://m.v4m.mobi/uni/thumbs/arrow.png" border="none" style="vertical-align: middle; float: left;" />
<span class="plansHeader">0 minutes call time included(to Any mobile/landline)</span>
<div style="clear:both;"></div>
</span>
and remeber: Always clear floats!
It does, but your image is slightly taller than the line on which the image appears, so the second line is floating against the margin of the image.
You need to clear floats (either by adding a div between lines with style for clear: both or setting CSS on the second block to clear the float) to prevent this from happening. You could also just set the first line to line-height: 21px, the height of your image (which I'd recommend you do anyway), and that'll fix it, but ultimately you'll want to clear the floats to be safe.
Related
Hi having some issues here trying to stack image and text on the same line left to right.
<div style="position: absolute; top: 200px; left: 30px;">
<span style="float: left;">
<img class="tglbtn" src="img/toggle_tab_l.png" data-swap='img/toggle_tab_r.png' height="60%" width="60%">
</span>
<p style="float: right; font-size: 20px; color: #92d6f8; overflow: hidden; text-align: left">
Remember User ID?
</p>
</div>
Your Code
http://jsfiddle.net/21Ltsbeb/
Improved
http://jsfiddle.net/21Ltsbeb/1/
I'm not seeing the issue? Though, you might be better off using display:inline-block with matching html elements. Inline as in Have these elements in the same line
.tglbtn {width:60%;height:60%;}
span {display:inline-block;}
p {font-size:20px;color:#92d6f8;overflow:hidden;text-align:left;}
<div>
<span>
<img class="tglbtn" src="http://www.placehold.it/66x66">
</span>
<span>
Remember User ID?
</span>
</div>
Edit
A few things I should note that you need to address as a beginner.
Don't use inline css
Don't use pixels (rem,em,or %)
Avoiding using position absolute
Don't use floats
Remember that good web applications have great continuity in their structure.
Until you get the hang of CSS, I might recommend Foundation's CSS or Bootstrap CSS.
This could be cleaned up a lot for you, and also simplifying your css/removing a lot of the inline styling:
.mind{
display:inline-block;
vertical-align:top;
}
.tglbtn{
height:20px;
}
<div class="wrap">
<img class="tglbtn" src="http://placekitten.com/g/200/300" data-swap='img/toggle_tab_r.png' />
<div class="mind">Remember User ID?</div>
</div>
Set the paragraphs top margin to 0
margin-top:0;
It's being set by the browser default otherwise (I see the mis-alignment in chrome).
See this fixed Example
why is it happen?
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT2FCIU0MAB5Op7RAt-5u576obOi-9JKtseSgYJDMdhAc04mKoS"
style="width:200px; height: 200px;"></img>
<span style="margin-top: 300px;">my text</span>
this is my jsfiddle:
http://jsfiddle.net/8sxFT/1/
I know I can add display: block to the span and then margin-top will work.
but why isn't it working now? I closed the img element..
any help appreciated!
Span element is inline element not a block element. So they ignore vertical margin value.
Solution is you can make the span element display:inline-block; Now you can use margin property.
Check this Demo jsFiddle
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT2FCIU0MAB5Op7RAt-5u576obOi-9JKtseSgYJDMdhAc04mKoS" style="width:200px; height: 200px;"></img>
<br />
<span style="margin-top: 300px;display:inline-block;">my text</span>
you are forgetting to use the float:leeft or right try it
<img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT2FCIU0MAB5Op7RAt-5u576obOi-9JKtseSgYJDMdhAc04mKoS' style="float:left;width:200px; height: 200px;">
<span style="float:left;margin-top: 300px;">my text</span>
you don't need to close the img tag as you did < /img>
I have this HTML:
<div style="width: 100%;">
<div style="float: left; width: 44%; display: inline;">
<img width="95%" height="95%" style="border: none;" src="http://www.problemio.com/img/phoneimage.png">
</div>
<div style="display: inline; float: left; width:54%>">
</div>
</div>
<p>
Some text blah blah
Note that there is nothing in the second div. And what this does is display the text that is below the second closing div in a space next to the image. In other words, it puts it in the space there the empty div is!
How can that be? Is this somehow a bug or is it supposed to be like this?
float is a block,
and you tried to use display: inline in a block is not right
try :
<div style="float: left; width: 44%; display: inline-block;">
You are not clearing the floats so they will continue to float next to other content. Apply a clear fix to the outermost div. Adding overflow: hidden will work, but is antiquated.
http://jsfiddle.net/ExplosionPIlls/nNkJ8/
I don't really understand what you are trying to do :-), but I see this:
On your second div: width:54%>" it should be width:54%" (without the greater than symbol before the quotation mark)
floats and display:inline do not get along together. I would replace both for a display:inline-block like this
<div style="width: 44%; display: inline-block;">
Even though your second div specifies a "width" attribute, if your div is empty, it will be rendered with a width of zero. Try adding a "background-color: red;" to your style to see what I say. You should see nothing.
The text is next to your image because that's what float does. If you want to draw your text below the image you should "clear" your floats. Try this:
<p style="clear:both;">
Some text blah blah
If you decide to try the "display:inline-block" the "clear:both" is not necessary.
<div>
<img src ='image.png' style="display: block" />
</div>
In Chrome, this renders a 1px margin on right side of the image and pushes wrapper div out. How to remove the margin?
Use the margin and padding in the style attribute as shown below:
<div>
<img src ='image.png' style="display: block; margin: 0px; padding: 0px;" />
</div>
In addition to this, you can also remove the border by adding the style "border:0px".
I have not tried it, let me know if it works.
Using CSS to remove only that will still make your website look different in other browsers. It's best to use a CSS reset to get the same formatting in all browsers.
CSS reset like this:
http://meyerweb.com/eric/tools/css/reset/
I saw this behavior in Safari as well. Try this.
<div class="group-holder" style="display: table;">
<img src="myimage1.gif" style="display: table-cell;" />
<img src="myimage1.gif" style="display: table-cell;" />
<img src="myimage1.gif" style="display: table-cell;" />
</div>
This worked for me.
This is the html asp.net generated (with some client-identifying details removed)
In Windows XP / IE 7 clicking on the image does nothing. Click on the text executes the hyperlink. Right-clicking anywhere and then selecting open in new window or open also works.
In other browsers, it all works as expected.
Is there anything simple anyone can see that I could do to this to get it to work correctly in IE7?
<div id="hdrXXX">
<a id="ctl00_XXX" title="XXX" class="hdrXXX" href="http://google.com" target="_blank">
<div style="float:left;display: block;">
<img id="ctl00_XXX" src="Images/XXX.png" style="border-width:0px;" />
</div>
<div style="float:left; display: block; padding:15px 0 0 0;">
<span id="XXX">Some text right here</span>
</div>
</a>
</div>
You can only put block-level elements inside anchor elements with HTML5 and browser support is still a bit iffy on it. IE7 obviously does not support this.
You don't need to use division to do this:
<div id="hdrXXX">
<a id="ctl00_XXX" title="XXX" class="hdrXXX" href="http://google.com" target="_blank">
<img id="ctl00_XXX" src="Images/XXX.png" style="border: 0; float: left; margin-right: 15px" />
<span id="XXX">Some text right here</span>
</a>
</div>
This should work to the same effect...
Try removing the divs, as the img tag and span are naturally display-inline. Add display block, float left if you need margins right to the tags themselves as supposed to adding divs. Also, to the anchor tag, add overflow:hidden (if you use floats), so that it takes up the total space of the two child elements.
Because of your floats, the anchor collapses. Also, you can't put block level elements <div/> inside inline elements <a/>.
Keeping with the non-W3C code you've got there, you'd need to clear your floats with this code right before the closing </a>
<div style="clear: both"></div>
You'll want to probably create a class called .clear and move the styles to that. Here's an example from my site:
.clear-fix {
clear: both !important;
display: block !important;
font-size: 0 !important;
line-height: 0 !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
list-style: none !important;
}
A better way to do your code which is W3C compliant is the following:
<div id="hdrXXX">
<a id="ctl00_XXX" title="XXX" class="hdrXXX" href="http://google.com" target="_blank">
<span style="float:left;display: block;">
<img id="ctl00_XXX" src="Images/XXX.png" style="border-width:0px;" />
</span>
<span style="float:left; display: block; padding:15px 0 0 0;">
<span id="XXX">Some text right here</span>
</span>
<span class="clear-fix"></span>
</a>
</div>