I currently am comparing this in Safari and Firefox.
A small image inside a div, which I need to center vertically.
Here is a simple test case that I have distilled down:
http://dl.getdropbox.com/u/340087/Drops/09.23.09/so-03f73322-164033.html
This one is probably even more simple:
http://dl.getdropbox.com/u/340087/drops/09.23.09/align-42fc19f2-154007.html
1) Why do I need a space after the image in order to get any align css to work?
2) What can I do to get Safari to perfectly center, it is 1-2px too low, essentially lining up the top of the image with the text.
Thanks
Images are considered inline elements, so they're basically treated as text.
If you want exact positioning across browsers, the safest way is to use the image for a background, rather than an inline img element.
Enclose the text in a span, and apply vertical-align to that as well.
HTML snippet:
<div class="right">
<img src="action_check.png" width="16" height="16" class="status" alt="Data Ok" />
<span>Chose a User Name</span>
</div>
CSS addition:
span { vertical-align: middle; }
Tested in recent versions of FF, IE, Safari, Chrome and Opera (Windows).
Try the universal selector:
div * { vertical-align: middle }
or go old school (if you can) and use tables?
There's always a difference of few pixels in Safari (Mac) and browsers because of the way safari renders text. Read about it here.
Related
Live URL - look at "449 zł"
Firefox on Windows display is but from the top and from the bottom:
Other browsers display this text ok.
I have tried different setting of line-height, height, overflow CSS properties for both .regular-price and .price elements, but with no luck.
What is the reason?
as far as I know there is no problem at all with browsers to render some markup like this:
<a href="link.html">
<h1> some headline </h1>
<p> some text </p>
<img src="someImage.png" alt="some image">
</a>
apparently IE 8 and IE 9 do have some issues. To an a-tag around those elements causes problems when I'm opening up the page. All elements are shifted and not on the position where they should be. Anything you know about that and how to fix the issue?
Thanks
I composed a quick demo which wraps the topic anchor in inline, inline-block, and block divs. Above, you'll see a comparison between Firefox (background) and IE8 (foreground). The inline div kind-of behaved as though it was floated left. I did not see any appreciable difference between IE8, Firefox, or Chrome.online demo: https://googledrive.com/host/0B8BLd2qPPV7XWG93OFhROGNSaEE/MeesterLeester.html
#supersize. Does this answer your question? Or, maybe you could tweak this demo to illustrate your concern.
This site is displayed properly in chrome, firefox and also IE9. But it does not display properly in IE8.
I tried all thing like margin:0px auto, display : block but it does not display properly.
Please help me.
Thanks in advance.
The site look nice in IE8... write exacty what do you want to change...
Some tweaks that you should make:
for Search side:
add a vertical align for the number in the rounded thing;
changeSearchForm .number_bg{ display:table;}
changeSearchForm .number_bg span { display: table-cell; vertical-align: middle; }
make the inputs and inputs images smaller
use some font awesome icons
fix the margins for the footer in IE
if you want to make a circle, all the border with 50%, so it's always a circle, does not matter the with and height.
P.S. Next time work in % for the 'skeleton', base site architecture :)
I am able to see the issues you mentioned in IE quirks mode, actually IE8 is working fine.
Still if you need to fix this issue, Do this -
Add text-align center to the main div(class-skin) or even body tag - this will center the content and then add text-align:left to the content div(class = outter-wrapper) so that again text-align will be set to default for the content.
.skin{text-align:center;}
.outter-wrapper{text-align-left;}
Thanks,
Karthik.
I have a site built in Dreamweaver using HTML and CSS.
The layout is exactly how I want it in all browsers (Chrome, Firefox, Safari) except for Internet Explorer 7 where the layout of the bottom row of images or image is totally messed up - either too high or too much to the right. I have no idea why this is happening, I am a beginner and have tried all I can think of, if anyone can help that would be much appreciated.
The site is here: http://www.mediadarling.co.uk/clients/lenistudios/
Thanks in advance!
There’s a couple of bits in your CSS that I don’t quite understand:
#movers-row {
...
margin: -120px 0 0 120px;
Why the negative top margin? This seems to be what’s pulling the images up too far in IE 7. I don’t really understand why it’s not in other browsers; something to do with the floats involved I guess.
#footer {
...
margin-top: -130px;
Is this related to the other negative top margin?
Anyhoo, I think you can fix your issue in IE 7 by:
Removing those two negative top margins
Adding margin-top: 10px; to #imagerow just in IE 7 (and possibly IE 6) (the padding top doesn’t work with the floats for some mysterious IE reason)
See here for example code: http://www.pauldwaite.co.uk/test-pages/5220698/
You’ve also got a couple of validation errors in your HTML. I don’t think they’re causing your issue, but I fixed them first, because when you’re trying to track down an IE bug you really don’t want validation errors in there. Here’s the validation of the page.
After: <div id="rotxt">Roll over images to see larger versions</div>
Place: <p class="clear"><br /></p>
The .clear contains the CSS: clear: both;
you can use conditional statements for IE, here's an example:
<!--[if IE 7]><link href="css/layoutIE7.css" rel="stylesheet" type="text/css" /><![endif]-->
This is placed at the <head> and assumes that you have an extra css file with the IE corrections.
P.S. you need to add your IE specific CSS rules into the IE CSS file, that way it will work in IE and most browsers...
In my example, I used the "if IE 7", means if it is IE version 7, but you could use combinations and other versions.
EDIT: surround the Dear guest, text, image and the div #rotxt with another div and make sure it actually surrounds it with a simple rule:
.surround {height: auto; overflow: hidden;}
this is cross-browser, no need for the conditional CSS.
EDIT 2:
Ok, the problem here is in several places...
You're floating the image to the right, ok
I suggest surrounding the title + text + caption with a div with a float left.
Then surround both the image's div and the new div with an aditional div. This one with a height: auto and overflow: hidden.
Then remove the float of the images main div, and remove the top margin;
Finally, it would be best to add the orange rectangle as an element that comes after the images block (this way it's guaranteed that the social div comes in the right place).
So, my suggestion is something like this (sorry for not real tags):
[new surrounding div]
[main image div]
image
[/main image div]
[surrounding div]
title
text
caption
[/surrounding div]
[/new surrounding div]
[images div]
images
[/images div]
[sepatator div] (optional)
[/sepatator div]
[social div]
[/social div]
In my HTML pages I have text with imgs. The top edge of the img is aligned with the top of the text, but I want the bottom of the img to be aligned with the text.
How can this be done?
UPDATE Now I see this is the default behaviour, but it doesn't happen in my page. What could possibly be wrong?
EDIT: I came back to add line breaks and decided to throw an example in, too.
You can do this with CSS's vertical-align property. Something like this:
<img src="wherever.png" style="vertical-align: text-top;" />
More information about the style is available at w3schools, where they have a neat sandbox.