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.
Related
Regarding this in desktop view, I have difficulties to bring the svg triangles on the top of the green stacks to their vertical flex-end on IE11, see screen capture. Chrome and others work properly.
I tried some ideas that I got from CanIUse, but I wasn't able to get it working. Bootstrap 3 is present. Thanks for any hint.
You can remove all style of .tg-nh-rating-table svg and add
.tg-nh-rating-table svg {
height: 50px;
}
It seem IE11 realize svg is 100%, the same height with wrap div pylon-end. So just add height for svg. This will work.
I'm trying to convert some divs to buttons. They work fine on ie and chrome but on firefox even though I set the images and divs to the same size the images are still bigger than the divs. The images also don't touch the left border of the div as they should even though they do in the other browsers. I have tried setting a browser specif css rule but it doesn't appear to have any affect. Does any one know how i can solve this? By the way I have only converted the first div to a button at the moment.
The page that I'm having a problem with is hear (the button is near the bottom of the page and is titled "Fears/phobias"):
http://www.swanleyhypnotherapist.co.uk/
button.graphic {
padding: 0,
margin: 0,
boder: 0
}
for a start, you seriously need to post code...
This is our website link
http://navttc.org/index.php/home
Here you can see our partners scrolling using marquee, i have set the images to align center and even try to do with css i.e style="margin: auto;" but still images are not align in Firefox and IE only center align in CHROME can you tell me what could be the reason behind this ?
Please try this CSS code:
.bjmod-content
{width:128px; margin:auto;}
Try styling the image to display: block in order for it to work with auto margins.
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]
The navigation bar on my site http://hungryathome.net doesn't center properly on Firefox and IE8 Standards mode. It centers properly in IE7 Compatability mode and in Chrome.
What's odd is that setting a Margin on the div (id="navlinks") to 4px or more will make it center properly. Any less will result in it being slightly off-center. I changed the values back and forth in Firebug and it's confusing the heck out of me. Any explanation for why that's happening?
Aha, looking at Firebug using their awesome controls which put the blue color over the elements, your header image is actually hanging down about 3 or 4 pixels over your nav bar, which is causing it to move the nav over and actually make it smaller, so it is centering it "properly". Try making your header a few pixels taller until it snaps into position correctly.
example http://img809.imageshack.us/img809/9784/example.jpg
EDIT: Or apply a border: 0 style to that image so it doesn't add the border around it, might be a better solution...