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.
Related
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.
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
It's even IE 9, so that surprised me. Anyway, if you view http://www.ethoma.com/testhome.php on Firefox/Chrome you can see the general look I am going for.
For some reason a few features are missing on IE and Opera:
The gray space in between the post "islands" is white, for reasons beyond me.
The shadows on the islands are missing (and if you view my CSS in Firebug, you can see that I was very mindful of cross-browser issues!).
the rounded corners are missing. I know this is CSS3, but shouldn't there be support, since I have modern browsers.
Also, if it turns out these issues (specifically the rounded corners) are impossible without more effort than just CSS, can you link me an article on doing it the hard way please?
The biggest thing though is that I first take care of that stupid white space in between islands.
Thanks for any answers/views!
(I am sorry if anyone feels this post isn't up to stackoverflow quality, but I did my best -- I am rather alarmed that the gray space issue popped up)
The reason for the white background is because in your CSS you set:
.hhshomebody {
background-color: #FFFFFF; /* DELETE THIS */
min-height: 75%;
width: 100%;
}
If you delete the background-color from that rule, your background will be fixed in both IE and Opera.
The issue in IE9 is due to compatibility mode, which switches the browser into IE7 standards mode. Before IE9 box-shadow and border-radius are not supported, which is why you would not have seen them. To turn it off click the little torn paper icon beside the refresh icon to make it go gray. Once in IE9 standards mode the problems you described will be fixed.
Well, on your test page, you've got a JavaScript error "generatePharse() Undefined".
The <div>s have a padding set to them - so the nested tables won't be able to go 100% w/h (if that's the goal). Those same divs also have a fairly decent margin under them - so they won't be able to stack edge to edge (again, if that's the question).
It looks like you've got a few questions within a question. So, sorry if I've missed the mark here.
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.
I'm using CSS3PIE to apply some rounded corners to elements in Internet Explorer that will get them by stylesheet in other browsers. I've run into some issues with it though.
In IE8, I discovered that any element that had the PIE behaviour would behave strangely. The container would jump a few pixels to the right, but the content would stay in its original position, giving the appearance that the content had all shifted left relative to its container. This would be especially problematic on elements with no or small amounts of padding.
I was able to hack my way around the problem in IE8 by using X-UA-Compatible, but I'd rather avoid this solution if at all possible. I don't have access to IE9 for testing but my understanding hacks like PIE aren't necessary and it would be wasteful to force a compatibility mode in a browser that doesn't need it.
I have worse issues in IE6, with the PIE layout breaking down completely on a list that is set up to use display:inline; zoom:1; list items (to simulate inline-block, which works in IE8 and the other browsers). Here the borders of the list items get rendered in completely the wrong place.
So ideally, I'd like to have PIE work properly in IE6, and in IE8 without having to resort to compatibility mode. As far as IE6 goes, a graceful fallback where PIE is just not applied will do. IE7 is the only browser where the page displays as intended.
I can't provide an example page just at the moment unfortunately, I can add one later though.
Follow up:
Here are some screen grabs made with IE Tester. I'm hoping they will make things a little more clear for everybody. As you can see, IE7 is fine. However, in IE8, the containers are offset to the left relative to their content, and in IE6 the list elements (with the rounded 1 pixel border) are a complete mess!
Full size versions for IE8, IE7 and IE6 are also available
Followup 2
Here's a link to a demo page.
As other designers are working on the stylesheets and other parts of the design I can't promise it will remain fully reflective for very long, but hopefully it will for long enough to solve the problem. (Yes, I'm aware there's JS errors in IE6, those aren't my problem).
Example page
i prefer using http://www.curvycorners.net/
I was experiencing a similar issue with IE8. The elements PIE was applied to would first display 10-20px lower, then jump up to the proper position.
Applying the rule "display: inline" to the element seemed to stop the issue.
"Position: relative;" and "zoom: 1" on the element or parent element seemed to have no effect.
It's a bit weird. Once the rule "display: inline" is applied, the issue dissappears on
refresh. But if you remove the rule, it still looks okay on refresh, until you
close and reopen the browser window - then the jumping reappears.
Hope that helps someone.
Try adding
position:relative;
z-index: 0;
as suggested here http://css3pie.com/forum/viewtopic.php?f=3&t=10
This question is similar to the one posted here: CSS3 PIE - Giving IE border-radius support not working?