I am trying to create a landing page here: http://www.serik.me and it looks good in Chrome & Safari but is not working in Firefox. Specifically, the #bottom ID is getting pushed up into the #righthalf ID.
When I tried to validate the CSS I ran into a bunch of errors with the embedded flash. I also tried all sorts of positioning fixes (absolute, relative, floats etc) but nothing seems to work.
Is it a problem with my in the HTML?
Any idea what I am doing wrong? I want the three rounded tables at the bottom to be centered across the entire page below the content above it. Thanks in advance!
Add this to your stylesheet:
.bottom {clear:both}
That should be all you need. Sorry I can't explain why it's working in Chrome and not Firefox, but this should at least get you on your way. (Tested in FF4)
The bottom isn't really centered, but it looks the same in Chrome as in FF with that fix.
I didn't see any major problems with your html, although it didn't validate for alt attributes and the embed stuff. Those shouldn't be affecting your layout though.
Good luck, the site looks nice.
Related
I'm using Firefox and I have noticed a simple problem that when I'm using a image slider sometimes images overflow out of their container to the top. But it's only happening when I'm using Firefox on Chrome everything works fine, any ideas?
I have tried adding overflow:hidden, but it didn't help in this case.
If this is only happening on certain browsers it might be because you haven't done a reset on your CSS values.
You might want to check out this post and see if you're facing the same issues. If so you could add a reset.css file to your project to fix the problems. For more information, please check out CSS Reset.
Does Safari have issues with Media Queries and positioning? My website looks fine in Chrome and Firefox, even looks ok in IE. In Safari, there are weird margins and the forms fall apart. Any ideas on how to fix it? Sorry it's not too specific but I don't know what's causing the issue.
When I change the browser size, things start to move to the right place. It appears to fall apart when it's above 718px in the Contact and Portfolio section.
My website is tiffanymackins.com.
use vendor prefixed for display flex and inline-flex, see this:
https://css-tricks.com/using-flexbox/
I don't understand why some images and styles are working on IE8 and others aren't in the same page of the same website!
http://www.chrissteeleperkins.com/
The homepage is fine but the images in the footer are missing in the whole website.
If you go to other pages of the website, sometimes the css style looks to be missing.
This weird behaviour seems to appear on IE8 - Windows 7.
Any help or suggestions?
Thank you,
Giorgio
The homepage is fine but the images in the footer are missing in the whole website.
Seems, that problem is with float: left in <li> elements. Try fixing size of blocks or make elements inline;
The problem is compatibility of your css/javascript with upper versions of IE, This should help you out.
Above is just a work around better way would be to fix your css and javascript/jquery to take care of compatibility issues.
Here is my site:
http://smartpeopletalkfast.co.uk/pp/
The very bottom menu is laid out correctly in every browser ive tested, including IE8 and IE7. However with IE9 its starts further to the right than it should and the twitter icon is pushed down to the next line. How can I fix this?
I tried to install firebug lite to see whats going on but I cant extract the firebug-lite.tar.tgz file.
http://getfirebug.com/firebuglite
Thanks
Turns out one of the relatively positioned divs needed to be given a set width.
I'm designing my personal website at the moment and want to have images inside h2 headlines in the same line. The markup I'm currently using validates, so does the css and the desired effect shows up on Firefox, Chrome, Safari and IE8 in standards mode.
IE8 in compatibility mode and IE6+7 however put the image into the next line which looks awful, of course. I'm not quite sure how to work around this and currently I'm stuck. Help and an explanation, possibly a pointer where I could educate myself more about those particular things with IE would be greatly appreciated.
The code can be viewed live here: http://storage.planet-tiax.de/test/index.html
Don't use the <img> tag for what you're trying to do. Although they are images, they are not what the <img> tag is meant for. The tag is meant to display images that are content on the page. In your case, the images are stylistic elements of the page and therefore belong in the CSS, i.e. as background images.
Placing the images instead inside the CSS, as background images, should also alleviate your IE concerns:
h2#weblog { background: url(images/weblog.png) right no-repeat }
As far as a resource that will let you know of IE headaches, I find that QuirksMode gives a good overview of the problems involved in IE, as well as some insight into how to fix them.