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.
Related
I've used the fix in this question to resize images in one single line and it works perfectly, that is until you get into IE then IE just decides to ignore it completely. Does anyone have a fix?
Here's what I used:
How to get multiple images to auto resize and stay centered within a div
Here's the page I'm working on in Chrome:
Chrome Visual
Here's the page I'm working on in IE:
IE Visual
Thanks :)
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 am having a real hard time developing for Internet Explorer.
Below is a snapshot of a project as it appears in IE9 and below that in Google Chrome it looks the same in Firefox as well.
Some of the things not working correctly in IE9 on this page...
The navigation bar, the links are stuck at the top in IE instead of vertically centered
The navigation bar does not have the box shadow applied in IE
The sidebar and content boxes do not have either the shadow or beveled corners in IE
The Tag boxes do not have the round edges in IE
In the content section, notice the 2 tags "CSS" and "FONTS" on the right side of page are pushed down, in the Chrome version they are aligned.
The project is not online so I can't show it but I have put the header section into a JSSFiddle page here http://jsfiddle.net/kenLs/3/embedded/result/ you can see that this JSFiddle of the header DOES work correctly in IE9.
That really has me confused, it works on JSFiddle but not on my site. I have looked at everything I can think of to make it work correctly. I even added <meta http-equiv="X-UA-Compatible" content="IE=9" /> to my header. I had some HTLM5 elements on my page but I replaced all them with regular div's just to test with IE, nothing I do seems to change any of these problems.
IE9 snapshot
Chrome snapshot
I know this is hard to debug since the project is not online but if you have any ideas why this may be happening I would really love to know.
UPDATE
I just realized that on that JSFiddle, if I turn off Compatibility view then even the header will look like the one in my image
I also added another simple JSFiddle test that just has the code for my tags, even this little code does not work correctly in IE, I have to hit the compatibility mode for it to work otherwise the corners are square http://jsfiddle.net/j9Qe3/1/
If it works in jsfiddle but not on your site, I wonder if you are using a doctype or if there is anything placed before the doctype which would put IE into quirks mode.
I've checked other questions on here but I haven't found anything that will help me.
Since FireFox 4 was released I've been having an issue with the menu on my website.
www.ffxivinfo.com
As you can see, the menu is supposed to fit along the little graphic buttons so that each link is on the "button". In Chrome, IE8 (not checked 9) and FireFox 3.5 this looked perfect. However since FireFox 4 it has been displaying wrong.
It looks like it's a padding issue but I can't figure out where it is coming from. I have even removed the padding between each link so that they are close together (0 padding) yet the menu still stretches further to the right in FireFox 4+ than in other browsers.
I use the auto generated menus available at purecssmenu.com and I modified it to fit my own website.
Here is a link to just the nav code, I use a PHP include to insert it.
http://www.ffxivinfo.com/nav.php
And here is a link to the CSS for it.
http://www.ffxivinfo.com/navstyle.css
Basically I need the navigation to look the same in all browsers so that it fits into the graphic "buttons". I'm tempted to just scrap the current design and go with a simple gradient background and leave the menu wider in FireFox 4+ than other browsers but that's a bit defeatist.
Any help would be much appreciated. This is the first time a coding problem has sent me to a forum asking for help but I just can't figure this one out.
I believe the problem is not in your margins but due to the differences in text rendering between the browsers. In this case, Firefox is rendering the text slightly wider.
If I might suggest an alternative, rather than using an image background and hoping for pixel-perfect rendering (which is pretty unlikely given the diversity of browsers and operating systems out there) try styling the links themselves with background-color and border-radius.
I don't see the problem in FF6. However, I see you specify your font size in pt. pt is for print, not the web. Try changing that to px and see if that fixes your situation.
I might ignore the Firefox 4 issue.
FF is now on version 6.
Your issue does not appear in FF3.5 (the most widely used FF) or FF6, both of which have more browser share than FF4.
http://gs.statcounter.com/#browser_version-ww-monthly-201008-201108-bar
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.