I have a tumblr theme that I developed on a mac. It seems to display fine in Safari, firefox on my mac, but when I view it on a pc in IE I get some issues.
I get an issue with the hover image on my search button image and links.
In IE7 I am not sure what is happening?
Can anyone help me sort this out? or point me in the right direction?
Thanks
Hi,
I dunno what tumblr is
does IE7 act up on whatever site you took this from? That can determine if it’s some already-built-in problem, or a new one you introduced yourself (you want the latter, because then it can be fixed)
you didn’t state clearly what the problem was… no code and that it had something to do with links or buttons. That’s not clear enough for anyone to point to any obvious known IE7 bugs. I personally have no trouble with anchors or links in IE7, but maybe I don’t code mine the way you code yours? We’ll only know with code, or if you have something online we can look at in IE7 to see the problem first-hand.
Could you post
-a better description of the problem
-code and/or a link to the page in question
What other browsers have you checked in? FF and Safari on Windows as well, or only IE on the Windows? (it is likely just an IE thing but fonts and dpi from the OS can affect all browsers in some regards)
http://gavinsteele.tumblr.com/
Unfortunately I can only go on reported problems as I dont have access to IE 7 or 8. I have to go out to an internet cafe to check it.
Thanks for your reply
Ok.
You hopefully don’t care about IE6: http://stommepoes.nl/tumblr/ie6.png png’s with alpha transparency, likely double-margin float bug (but didn’t check).
Your tag text under each photo: has a font-size larger than the line-height. Other browsers let the text overflow, but on my IE7 it’s getting slightly cut-off: http://stommepoes.nl/tumblr/tumblie7.png see the “g” in photograph"
http://stommepoes.nl/tumblr/tumblie72.png this is the <ul> itself getting highlighted… too small.
On the smarter browsers, a little blue thingie appears on :hover of the main menu. It does not appear on any IE, but an IE-user would not know it was supposed to be there (so, debatable how much you want to fix this). http://stommepoes.nl/tumblr/tumblie7menu.png Home is being hovered. IE8 also does not show the blue things.
I did not see if you are resetting margins and padding on lists, but it’s pretty common to see that one browser adds left padding while another adds left margin on lists (to make room for the bullets). Target that main menu specifically and remove any margins or padding that you did not explicitly want. This should make everyone the same.
I am not sure, but possibly IE is not showing blue things because some element is not tall enough to show them: http://stommepoes.nl/tumblr/tumblff3menu.png however this is hard to tell because your code is invalid:
<li><a href="/archive"> Archives </a></li>
<form action="/search" method="get">
<input type="text" name="q" value="" class="box"/>
<button class="btn" title="Submit Search">Search</button>
<!-- <input type="submit" value="Submit" /> -->
</form>
</ul>
A form cannot be a direct child of a ul, therefore it’s rather nice that browsers have still managed to figure out what to do with that.
You can make this legal by wrapping a <li> around the form. The form also is required to have a block child directly (you start right out with an input which is inline-block), so this is also illegal but I’ve seen so many of these that I know this is never going to cause you a visual problem. However, valid code is happy code: throw a div inside the form to wrap around the inputs. Fieldsets are overkill for little forms like that.
</li>
<li>
<form>
<div>
<the inputs>
</div>
</form>
</li>
</ul>
Also you see the form is on a new line. This is only happening in IE6 and 7, not IE8. This seems to be because the form is too wide to fit, and is dropping down: http://stommepoes.nl/tumblr/tumblie7form.png Let’s see if it gets any better after making the code valid.
compare to Firefox: http://stommepoes.nl/tumblr/tumblff3form.png
The width seems to be the culprit here, but whether it’s due to some browser default of form padding or not, I didn’t check. It’s ok to remove padding manually or in a reset from forms and fieldsets, but do not remove padding from form controls such as labels, inputs, selects or textareas.
form {
padding: 0;
}
All in all, not a disaster, you just really want that form to be on the same line as the links. The links do react on :hover and like I said, blue thingies are just an additional feedback tool that looks cute, but IE users are using an inferior browser… they practically choose to get inferior web pages : ) unless you consider it worthwhile to hunt down the exact cause of blue thingies not appearing in IE (this can be fixed).
Unless your reports from others mention some other buttons somewhere… nothing else jumped out at me.
Wow, thank you so much for you time and amazing feedback. Thank you for going into detail with your explanations and including screenshots.
I will see if I can fix a couple of the points you highlighted.
Thanks again,
I now know where to come when a IE bug stops me in my tracks!
Thanks
: )
Let us know how it goes.
If you cannot get to the internet cafe to check IE7, you can also get a quick static glimpse at http://browsershots.org/ (so long as there is no restrictive robots.txt on the site).
ok. lol
I seem to have fixed the issue with the tags showing. I have a friend on the phone and he says its all looking ok.
I have made the change to the form code, I have added the li and the div you mentioned.
I have set a basic global reset using the *(star) to reset all margins and padding at the start of the css.
I then tried to set a form width to :165px (this is the width I get to in safari before the submit button drops down onto another line)
I still can not get it to work in IE7?
I am not worried about IE6. I would like to get the search form inline if possible.
My friend has told me that the hover button shows in IE8 but only after you mouse over a few times?
As for the little blue things on the main nav, again I have had no luck after altering the ul height and line height?
Thanks
Hi,
The form has dropped in IE7 because you have elements before the float and therefore the floated form begins on the next line down. Floats need to come first in IE7 and under otherwise they drop to a new line.
The easiest solution is to float the list elements to the left and then add a class to the last list element and float it right.
You can remove the width from the form and I would also float the inputs to kill the whitespace bugs but you will need to change the html source order.
You seem to have globally styled the form and input elements which is unlikely to be what you want so just add the topnav id in front so that not all form elements are changed sitewide.
/* Search */
#topNav form {
[B] float:right;
margin-right:10px;
/*width:162px;*/[/B]
display:inline;
}
#topNav input {
color:#fff;
background-color:#64676c;
border:none;
width:100px;
height:15px;
padding: 4px 4px 4px 4px;
[B] margin:2px 0 0;
float:right;[/B]
}
#topNav button.btn {
[B] width: 45px;
padding:0;[/B]
height: 26px;
border:none;
cursor: pointer;
text-indent: -9999px;
background:url(http://static.tumblr.com/pbjwl65/sqkkzbte0/search.png) no-repeat top right;
[B] float:right;
margin:0 0 0 10px;
}[/B]
#topNav button.btn:hover {
background:url(http://static.tumblr.com/pbjwl65/9M9kzbteu/searchhover.png) no-repeat bottom right;
}
/* POST */
/* Top Nav */
#topNav {
background: url(http://static.tumblr.com/pbjwl65/8ejkz5azj/menubackground.png) top left no-repeat;
height:90px;
}
#topNav ul {
padding: 10px 0px 0px 20px;
height:60px;
}
#topNav li {
clear:none;
[B] float:left;[/B]
padding: 0 14px 0 0;
}
[B]#topNav li.last {
float:right
}[/B]
#topNav li a {
clear:both;
display: inline;
padding: 0px 0px 8px 0;
}
#topNav a:hover {
color: #d5d5d6;
text-decoration: none;
background: transparent url(http://static.tumblr.com/pbjwl65/T9Jkz58q5/hover.png)bottom center no-repeat;
}
/* GENERIC */
<div id="topNav">
<ul>
<li> <a href="/">Home </a></li>
<li> <a href="/about"> About Me </a></li>
<li> <a href="/contact"> Contact </a></li>
<li><a href="/archive"> Archives </a></li>
[B]<li class="last">[/B]
<form action="/search" method="get">
<div>
[B]<button class="btn" title="Submit Search">Search</button>[/B]
<input type="text" name="q" value="" class="box"/>
</div>
<!-- <input type="submit" value="Submit" /> -->
</form>
</li>
</ul>
</div>
That looks more or less identical in Firefox and IE7 now. (IE6 is completely broken but I guess you knew that )
Hi, I found the problem with the blue thingies (I think).
#topNav a:hover{
color: #d5d5d6;
text-decoration: none;
background: transparent url(http://static.tumblr.com/pbjwl65/T9Jkz58q5/hover.[b]png)bottom[/b] center no-repeat;
}
You would think this shouldn’t matter (and it shouldn’t, but it does), but you have no space between the closing ) and the word “bottom”. IE has been known to ignore positioning on backgrounds without the space there (I’m surprised that I also don’t see the blue thingies in IE8 though). The order is also reversed (the first name or number should be horizontal and the second vertical, but browsers are supposed to know better if you mix them up and then use names like “bottom” or “left”…).
I would also add :focus to that statement. :focus is good, helps keyboarders also get that same visual feedback mouse users get:
#topNav a:focus, #topNav a:hover {
color: #d5d5d6;
text-decoration: none;
background: transparent url(http://static.tumblr.com/pbjwl65/T9Jkz58q5/hover.png) 50% 100% no-repeat;
}
See if that helps at all.
Thanks for looking at this, your words have really helped. I did not know about floats having to be first. I have made the changes and they all work which is great. I will be able to use this in future projects. So thanks very much.
I have one last question, will the hover images just not work in IE? Is there a work around or is that something I have to think about when designing?
As for IE6, I do think about it, but I am not going to worry about it. It;s time will come I feel.
Thanks again for all the greta help.
Sorry, just noticed the new post. Will have a look at those issues now.
Thanks, I tried those changes and they work ( I now have windows xp on my mac) in IE8. I can see the hover image in IE7 but it gets cut off by a couple pixels. Maybe an element height to big or another to small?
Thanks again for the help.
You need to add position:relative to the anchor to make IE7/6 show the full range of the inline element.
#topNav li a {
clear:both;
display: inline;
padding: 0px 0px 8px 0;
[B] position:relative[/B]
}