I've been designing and building a portfolio site and updated everything to be valid HTML5, but a friend just told me that all links in my header/footer are broken in Firefox.
The header and footer are position:fixed in my CSS — and I know there have historically been a lot of issues with rendering positioned elements in Firefox — but does anyone have any ideas for a quick fix?
The links are present but there seems to be some issue when you are setting html to position relative this is in both about.css and default.css (line 3)
Remove those properties and your hyperlinks become actionable.
html {
position:relative;
}
Related
I am working on a small website navigation issue and have the content working well in chrome, firefox and safari - but of course, IE fails to style the navigation menu at all.
I've created an unordered list and hacked styles onto it to make the menu horizontal.
Here is a direct link to the issue: (link removed).
The unordered list appears as exactly that, a bulleted unordered vertical html list in IE rather than the nice looking navigation menu in chrome.
Any advice?
In addition to the nav issue (which prevents all styling in this case on older versions of IE), there appear to be other problems as well.
The HTML code uses media attributes that are not recognized by old versions of IE, which means that they apply none of the CSS files. The quick fix is to remove the media attribute from the link element that refers to Large.css. A better fix is to collect most of the CSS rules into a file that you refer to with a link element with media=screen (or no media attribute), so that the media width dependent CSS files contain only those settings that you want to be different for different widths.
The IE 9 console contains CSS3114 error messages that say that #font-face did not pass the usage rights checks for OpenType embedding.
Medium.css and Small.css contain float: center which is incorrect (center is not an accepted value for float). Use http://jigsaw.w3.org/css-validator/ to check your CSS code.
You are using <nav> which is a HTML5 element. Old IE version (8 and lower) don't recognise them and don't style them.
To fix this you need to use HTML5shiv. Follow the instructions on that page to get it work.
In short, HTML5shiv creates every HTML element with document.createElement if you do that IE recognise them. To get the complete story: Paul Irish: The history of the HTML5 shiv
Replace the nav tags by div tags. It seems that no change to the CSS code is needed here, since you refer to the element using #nav, which works fine if you change <nav id="nav"> to <div id="nav"> (and </nav> to </div> of course).
I am working on a Wordpress theme, my footer background color just disappeared and it is appearing accurately even in IE7 but in IE8 there it no bgcolor for my footerwrap div, in all other browser it is working fine........
here is the link
Site link with the problem
Your doctype claims strict XHTML but your markup is a mishmash of unclosed and invalid tags. It's not surprising you're getting inconsistent results. Try to fix your XHTML or use a HTML doctype and see if the issue goes away.
http://acneherbs.org/wp-content/themes/limegreen/css/ie8.css
lines 257 and 269: dispaly:block;
probably meant display:block;
So I have built a website and I looked at it on internet explorer 7 and the menu bar is seriously misaligned. I looked into conditional comments and tried it out, and I don't know if I'm missing something. I put the conditional comment in the head tag of the website and then created a css style sheet just for ie7 and it didn't seem to do anything. Can someone tell me if there is a quick fix to this situation or a step by step to the conditional comment and custom stylesheet method? Any kind of help would be appreciated. Thanks. The website is here http://sgconstruction.org. The CSS involves a float of the page links to the left and a float right on the facebook and yelp icons within the blue bar. Both positions are relative. Thanks!
The issue involves the CSS you are using for your #connectguy <div>. This element is a block-level element which you have set to display: inline-block. Unfortunately, Internet Explorer 7 only recognizes inline-block on elements which are inline by default. You can work around this by setting the <div> to display: inline in your IE7 stylesheet.
check applying * before the css property you likes to apply for ie7 and below browsers only.
for eg:
#test {*color: #999; /*hack for IE7 and below*/
color: #F00;/*for all other browsers*/}
I've read through other questions but to no avail - I really can't work this out.
The site is (Been redesigned, so isn't relevant anymore. It used HTML5 elements, but they weren't declared as block, and IE doesn't assume that they should be.)
The gradient on the footer looks great in non IE browsers, but fails to show in IE 7,8 and the IE9 dev preview.
Any ideas?
You could try adding this to your footer CSS (in addition to your existing footer styles).
footer
{
display:block;
}
This fixed it for me under FF3.6, and I'm assuming will fix it in IE as well - The default display style for <footer> is inline which doesn't play nice with backgrounds regardless of browser. Applying block to it will treat it more like a div.
You'll also want to be careful with your use of HTML 5. Not sure of how well supported it is in all browsers. You might want to consider <div id="footer"><!-- contents of footer --></div> and applying styles to it by id in CSS instead..
I had a similar problem, but finally find the solution.
Change your format image to png.
And works fine in IE8.
This works:
#footer_text {
background: url(/media/img/gradient.php?w=4&h=160&sc=4c4c4c&ec=000000) repeat-x scroll top left;
}
I'd be careful about applying any styling to html5 elements like footer right now. They're not well supported by all browsers.
You can use them for semantic reasons, though.
If I look at the footer using IE 8's developer toolbar, I get this as the background-image definition:
url(/media/img/gradient.php?w=4&h=160&sc=4c4c4c&ec=000000); TEXT-ALIGN: center
Notice the part to the right. I'm not sure where it comes from - it's not in the style sheet. Maybe the sheet is somehow garbled. If I remove the text-align part, the footer image shows fine. The same is happening to your body definition.
try opening the file in Photoshop or similar, and doing a clean save for web as a PNG.
I need to prepare print css style for some page. It's possible to have footer on every printed page?
I tried the code, I've found on the web:
display:block;position:fixed; bottom:0px;
but it works only in Firefox.
I can try to fix it with table, but in Q. here: CSS: Repeat table headers in print mode is info, that it doesn't work in IE5 (maybe I made some error, but it seems, that it doesn't work even in IE7).
Does anybody fixed problem with printing footer on every page in IE? Doesn't matter if with tables or without them.
Thanks for help.
I do not think it is possible to print headers and footer using IE current, since Even in IE8 it is compliance to CSS 2.1. But there are other tweaks to get around the problem. Hope this URL will help: http://msdn.microsoft.com/en-us/library/dd433064(VS.85).aspx.
PS: The URL you referenced, on the bottom of the page specifically said works only on safari.