Im have made a navigation bar for the top of site, the final look i wanted in the end was, simple text menu but then when you hover items the background changes using a background image. I have managed to do this and in all browsers when you hover over the background changes and it is fine, but in internet explorer 7 it looks like this...
I have tried changing the heights and widths, but still cannot get IE7 to go the same as the others?
The HTML code for the navigation is
<ul class="buttonleft">
<li><img id="topflag" src="images/flags/gb.png" alt="GB"/> English <img src="images/arrow.png" alt="GB" /></li>
<li>Search and Book <img src="images/arrow.png" alt="GB" /></li>
<li>Latest Offers <img src="images/arrow.png" alt="GB" /></li>
</ul>
the CSS is
.buttonleft li{float:left;margin-top:-9px;display:inline;list-style:none;margin-right:6px}
.buttonleft li a{color:#D9D9D9;font:normal 13px Tahoma;text-decoration:none;height:36px;width:auto;padding:10px}
.buttonleft li a:hover{background:url(../images/topbgover.png)}
img{border:0}
#topflag{margin-right:3px;margin-left:3px}
Any help would be great :D
I came up with a variation of your navigation and posted the demo at:
http://jsfiddle.net/audetwebdesign/HB6Zm/
I did not test it in IE7 but the two critical things to set are: use display: block for the a tag as suggested by GodFather earlier (that way the padding works on all sides) and use a strict doctype, otherwise you may see variations in quirks mode.
Since your are floating the li elements, they become blocks, so there is no need to change the display property.
Finally, it was not clear to me why you need a negative margin on top, but without see the final layout, it is hard to say.
I added some extra paddings and background colors to highlight the block elements and illustrate which styles control aspects of the layout.
Change the ".buttonleft li" to display: block, and the same rule you need to set on "a" tag.
Maybe you'll need to set some padding on "a" tag.
Related
Why is it that when i make an image a link it creates a little black line to the right of it?
It's a combination of two things. Your anchor has an underline, and your markup has whitespace. For instance, your HTML likely looks similar to this:
<a href="http://google.com">
<img src="http://lorempixel.com/100/100" />
</a>
That nicely formatted space contains whitepace characters that get rendered (and then, underlined from the anchor). Note that some of the other answers might remove the underline by using text-decoration:none;, but there is actually still a small space next to your images caused by the whitespace, which can cause trouble if you're trying to achieve a "pixel-perfect" rendering. To solve it, remove whitespace from in between your anchor tags or set the font-size to 0:
Html fix (better):
<img src="http://lorempixel.com/100/100" />
Or, a css fix:
a {
/* Of course You'll want to better target this, since you won't want all anchors to be font-size:0 */
font-size:0; /* Now that the font size is zero, whitespace won't show. */
text0decoration:none; /* If you want to add this, you can, for good measure */
}
Note: One caveat of the css fix is some older browsers ignore a font size of 0.
It's a weird artifact with links and images, that the <a>'s signature underline shows a little. If you have your code like
<a href=...><img src= ... /></a>
You can fix that line by disabling the default underlining behavior on <a> links with <img> tags inside. Just apply a class to all of the <a> links in question (like <a class="img-link">), then CSS:
a.img-link {
text-decoration: none;
}
I have sorted it now, it was just a case of adding this to my css
a:link {
text-decoration: none;
}
I'm pretty new and still very wet behind the ears when it comes to css styling.
I have a class already defined .logo but I would like to create a second class "just for the logo image and background" from the Header template below"
<div id="container">
<a name="top" id="top"></a>
<div id="header">
**<div class="logo"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></div>**
<div class="menu">
<ul>
<li><img src="{$theme['imgdir']}/toplinks/search.gif" alt="" title="" />{$lang->toplinks_search}</li>
<li><img src="{$theme['imgdir']}/toplinks/memberlist.gif" alt="" title="" />{$lang->toplinks_memberlist}</li>
<li><img src="{$theme['imgdir']}/toplinks/help.gif" alt="" title="" />{$lang->toplinks_help}</li>
</ul>
</div>
I'm not sure how to take just the logo part and create a new class from the bolded part of the header code highlighted above. Thanks for any suggestions guys.
edit for update
Thanks for the responses so far guys. I think the problem is I don't really know how to describe the problem sufficiently.
Allow me to try and get a grip on explaining my actual situation.
I have two Divs which both have a drop shadow, by using padding I have allowed (deliberatly) them to overlap each other which looks great as it allow the image in one of the divs to slightly overlap the other div giving a 3d effect.
That works great so far except that due to both divs having a drop shadow, where the shadow overlaps there is a darker portion.
I've highlighted in the image the divs (which have css attached to them) and the darker portion where the drop shadows overlap.
I've tried using overflow: hidden but I'm not sure where I'm going with it if I'm perfectly honest.
image here
Thanks again guys, and I hope this makes a bit more sense... I think most of the time I'm confusing myself :)
As far as I understood you, you could just reference the image directly with this selector in your css:
.logo img
If that's not what you want please add more details to your question.
You can actually select every kind of HTML-Element you want just by calling it by its tag. e.g. .logo a or .menu ul li
I was trying to create a ordered list which contains a left float image + a link for each li.
It works as expected in IE9 and FF, but not on IE8 nor Chrome.
It was a very straight forward stuff like this
<li><img style="float:left" src=".." />some text</li>
I am new here so I can't attach screenshots, but I will describe the issue:
It works as expected in IE9 and FF, but on Chrome the list number (1. 2. 3.) overlaps the image. Or you can look at it this way: the image floats to the left of the <li>, covering the list number.
What could be the problem? I am using very basic CSS and HTML and have searched the site for possible solution.
My HTML code is like this
<li><img class="smallAvatar" src="/v4/thumb.axd/30_0/DA1D9A43075B47A1BAE73076E8D7867A.jpg">
Mind Game<br />
<span class="msgInfo">(8 Replies)</span></li>
The image is an avatar, so it is taller than text. I want to have the avatar floated to the left and have 2 lines of text on its right. I am not sure if there is another way to accomplish this without a left float
I had the very same problem in Chrome and fixed it by putting my li content into a div. So your code would end up like this:
<li><div><img class="smallAvatar" src="/v4/thumb.axd/30_0/DA1D9A43075B47A1BAE73076E8D7867A.jpg">
Mind Game<br />
<span class="msgInfo">(8 Replies)</span></div></li>
That way the dot or the number of your list is in front of the image and not overlapping the image anymore.
the <ol> or <ul> tags are stringently required in Chrome to work everything fine
Use float property only if required. It is normally used to solve alignment issues across browsers.
Instead try to give margins to ur image and text. If nothing works your way then you could use a small Javascript tweak to solve the Chrome issue
Put this in your when your page loads
if(window.chrome != undefined)
{
//remove float and add some margin image/text
}
Why do you want the float?
This works for me in Chrome: http://jsfiddle.net/ShStb/
EDIT: I would try using vertical-align.
Check out the updated jsfiddle: http://jsfiddle.net/ShStb/2/
I changed the elements' vertical-align to these values:
ol li img {
vertical-align: middle;
}
ol li a {
vertical-align: top;
}
I have a list with custom image bullets. If the user hovers her mouse over the bullet image, I'd like to either:
display a title attribute, or
display helper text
I can use JavaScript-based solutions, if needed
My source looks like this:
<style>
li.important { list-style-image: url(important.png) }
</style>
<ul>
<li class="important">Test</li>
<li>Test</li>
</ul>
Edit: I want the mouseover/title text to appear only over the bullet, but not over the body of the <li>.
As far as I know, it's not possible to pickup a mouseover of the bullet rather than just the <li> item.
One alternative (which is a bit dirty, but hey) is to include your "bullet" as part of your markup.
<li><img src="important.gif" alt="Something" title="Hey! Useful info!" /> Test</li>
jQuery('li.important').mouseover();
I'm failing to see the problem with the first bullet point you mentioned:
http://jsfiddle.net/xrGqk/2/
Tested setting a title attribute on a custom image LI in Chrome, FF, IE7. Mouse over the image on the LI and the title pops up in all three browsers.
onmouseover seems to work fine as well:
http://jsfiddle.net/xrGqk/4/
You should have an alert when you mouse over the LI custom image bullet.
Give these a try and see if they work for you. If so, consider posting the code that is giving you problems.
This page: http://alexchen.info/brianfunshine/2011/04/suscipit-lobortis/
has the the following output:
(I'm using Firefox 4.0)
<ul>
<li>Fred</li>
<li>Killin Brain Cells</li>
<li>Prodigal Son</li>
<li>The Cramper</li>
<li>3 Sheets To The Wind (What’s My Name)</li>
<li>My Oedipus Complex</li>
<li>Rollin’ On The Island</li>
<li>Rain Check</li>
<li>Trippin With Dick Vitale</li>
<li>T.V. Dinner</li>
</ul>
The unordered list doesn't have any style, but it is invisible!
reference picture:
What's the problem?
Your div with class .content-block-4, which contains the list, has height: 309px and overflow: hidden, which combine to hide any content in the div that would normally appear lower than 309 pixels.
Easiest thing to do is probably remove the height on that div.
its being blocked by that image with the giraffe:
use firebug and delete than element and you'll see what I mean
<img width="308" height="277" src="http://alexchen.info/brianfunshine/wp-content/uploads/2011/04/03.png" class="attachment-large wp-post-image" alt="03" title="03">
The div the unordered list in has a height set (of 309px) and the 'overflow' set to 'hidden'