I'm building a site using the 960gs and some styling of my own. My navigation menu uses this code:
<nav class="push_1">
<div class="grid_2 alpha"><span>About</span></div>
<div class="grid_2"><span>Services</span></div>
<div class="grid_2"><span>Projects</span></div>
<div class="grid_2"><span>Client Stories</span></div>
<div class="grid_2"><span>Contact</span></div>
</nav>
And this CSS:
.container_12 .grid_2 {width:140px; display:inline; float: left; position: relative; margin-left: 10px; margin-right: 10px;}
nav{background:#666; z-index:2; font-family:tahoma, helvetica, sans-serif; font-weight:bold; letter-spacing:1px; overflow:hidden}
nav div{position:relative; background:url(http://placehold.it/140x250/z03); height:250px; display:inline-block }
.interior nav div{height:50px}
nav div span{display:block; background-color:#111; color:#fff; padding:.3em 0; text-align:center; border-bottom: 2px solid #777;opacity:.9}
nav div a{display:block; position:absolute; top:0; height:100%; width:100%; z-index:5}
Which works fine in Firefox, but fails miserably in IE7, where only the text within the <span> elements appears and all other styling is lost. I've run into this same issue when trying to use <li> items instead of divs as well. Curiously, the same code shows no problems in IE7 when the height of nav div is set to 50px, as it is on pages with class="interior set on the body. The HTML5 shim is in effect on this page. I've tried searching through various known IE7 bugs, but couldn't find one that quite matched the problem I'm having. If anyone has any suggestions, I'd be much obliged.
In IE8, I could replicate the issue. What I found was that is was the tags that were confusing it. If I changed those to and added "nav" as a class on those divs and then changed "nav" to ".nav" in the CSS, IE seems to be happy. You can see it in action here in this jsFiddle:
http://jsfiddle.net/jfriend00/Vz85f/
If you still want the tags in for other reasons, it appears that you can wrap the HTML in the fiddle with before and afterwards and it will still display appropriately in IE - just don't use nav in the CSS rules. I'm unsure why - just reporting what I found with experimentation.
Related
you probably see this question a lot. However, I've been through threads and I can't seem to find a solution to my situation. It's probably something very minute that I'm missing, or perhaps I'm just barking up the wrong tree all together.
Basically what I'm trying to do is take an anchor with a {display:block;} with a set height and width and have its text be vertically and horizontally centered.
Right now this is my css
.logo
{
width:140px;
height:75px;
border-right:1px dotted black;
border-bottom:1px dotted black;
float:left;
text-align:center;
font-size:15px;
font-weight:bold;
color:#c60606;
}
.logo a
{
display:block;
width:140px;
height:75px;
background-color:#fff;
font-size:15px;
font-weight:bold;
color:#c60606;
}
/*the reason for the double declaration of text information is because
some of the logo divs do not have anchors in them, and it's for uniformity
purposes.
*/
.logo a div
{
margin-top:10px;
}
and then the html would be
<div class="logo"><div>my link</div></div>
Now the reason i stuck a div inside of the anchor is because I thought it would be a good way to separate the text from the actual block, but with that margin setting it moves the anchor down instead of just the text. The vertical-align attribute does basically nothing, and I'm at a loss in terms of what to do. Any suggestions or restructuring ideas would be great. Thank you.
a sample can be found at http://www.dsi-usa.com/test/clientele.php feel free to browse the site it's still a work in progress a lot has to be organized and re-coded. Anyhow, that sample is exactly what I want, just need the text to be vertically aligned as well.
If you set your line-height of the containing box (your anchor -- just ditch the inner div, you don't need it) equal to its height, then a single line of text will be vertically centered. If you require line-wrapping, it gets more complicated.
Here's a fiddle with just one anchor element to demonstrate the simpler scenario: http://jsfiddle.net/vdkAb/1/
UPDATE
...and if you don't need to worry about IE6/7 support (lucky you!), then you can use display:table-cell, and it works effortlessly -- without specifying line-height -- even with multiple lines, like this: http://jsfiddle.net/PH5Yw/
You can't have a <div> inside an <a>, it's invalid HTML. Use a <span> set to display: block; instead.
Update:
As of HTML5, you can now have a div inside an anchor (or any block level element.)
For this to be legal though, you must use the HTML5 doctype:
<!DOCTYPE html>
This usually works for me
$(function(){
$("button").click(function(){
$(".navbar").toggleClass("large");
});
});
*{
box-sizing: border-box;
}
.navbar{
display: flex;
color: white;
background: black;
height: 30px;
margin-bottom: 10px;
transition: all 0.25s ease;
}
.navbar.large{
height: 120px;
}
a{
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
margin-right: 20px;
padding: 0 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar">
<a>TITLE</a>
<a>Contact</a>
<a>About Us</a>
</div>
<button>Change Nav Size</button>
Just thought I should put this out there :)
Works only when the link container is display: flex
I have a problem with a div in IE7, it's disappearing and I don't understand why.
I already tried to add zoom:1 and overflow: hidden as someone suggested but it is not working.
The div is inside an unordered list (floated left) as the last element, floated right.
This is the HTML
<div id="top_menu">
<ul id="dropmenu">
<li>menu item1</li>
<li>menu item2</li>
...
</ul>
<div class="lang">content</div>
</div><!-- end top menu -->
This is the CSS
#top_menu {width:900px;font-size:13px; }
#top_menu ul#dropmenu {width:630px; height:28px; margin:0px; padding:0px; list-style:none; float:left; }
#top_menu ul#dropmenu li {float:left;display:block;}
.clearfix {display: inline-block;} /* for IE/Mac */
#top_menu .lang { width: 120px; color:#fff; margin:4px 10px 0 0; float: right; }
#top_menu .lang a{ color:#ff8601; }
#top_menu .lang a:hover{ color:#fff; }
Thanks for your help
EDIT: I included the html and removed url to avoid client complaints.
You need to add .clearfix to div#top_menu and add height: 24px; to div.lang
That fixed all the menu problems for me.
edit
...and probably don't use absolute positioning to solve layout issues.
i'm on IE9 now, but putting this site into "Compatibility View" seems to show the issue too.
The last entry in the main menu [ul] seems to extend all the way to the right of the element. This appears in markup before the .lang div so I wouldn't expect it to be covering it up...
Have you maybe tried putting the .lang element into "position:absolute" and then seeing if it shows up, (obviously assuming the parent element of it is positioned relatively). After that maybe try absolute with a top of 20px or so and see if it shows up then.
Good Luck!
UPDATE
Hang on a tick there. your .lang div is inside the [ul] element so is actually incorrectly positioned, since the only element allowed as a child of a [ul] is a [li].
Why not try taking this div out of the list and have it instead, just outside, as a child of the #top_menu element....?
That might work!
Not sure if this is relevant to your situation, but some versions of IE will throw away empty divs; if the div doesn't contain anything, adding something like will force it to exist.
So I am styling the Wordpress more link on the blog index page, and I've used some custom styles and markup that are displaying inconsistently between webkit based browsers (Safari and Chrome) and Firefox. All is well in Firefox, but in webkit it doesn't look as I'd like it to. I can't seem to find how to fix it in webkit.
The problem is that I have the more link text styled and then the end part wrapped in a span which I'm replacing with an arrow image, with the text floated left, and the arrow floated right. However, in the webkit browsers, the arrow span is not being styled inline with the text.
The markup looks like this:
<p>
<a href="http://link" class="more-link">
Read the rest of this entry
<span class="arrow">»</span>
</a>
</p>
And the Styles look like this:
.entry p a.more-link {
display:block;
float:right;
margin:20px 0px 10px;
padding:3px 12px;
background:#6e5e4c;
color:#e6decc;
font-style:italic;
text-decoration:none;
font-weight:bold;
font-size:14px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
line-height:20px;
}
.entry p a.more-link:hover {
background:#92d400;
color:#faf7ee;
}
.entry p a.more-link .arrow {
float:right;
display:block;
width:10px;
height:14px;
text-indent:-9999px;
background:url(/img/cure-sprite-main-v2.png) no-repeat -310px -195px;
margin-top:3px;
margin-left:10px;
}
Feel free to view the actual live code as well here: http://cure.org/blog
Just move span to the beginning of the link. Also it can help to fix almost the same problem in ie7.
<p>
<a href="http://link" class="more-link">
<span class="arrow">»</span>
Read the rest of this entry
</a>
</p>
Decided just to change the style of the span arrow from floated right to absolutely positioned and gave the anchor extra right padding to compensate. That seems to have worked just fine.
This could also have been done by making the arrow portion a background image on the link. Less code, less hassle, and no absolutely positioned minutia.
I've coded myself into a CSS corner. I have a list of images that I display next to each other using an unordered list. The unordered list is placed inside a fixed width div, so that each 3 images, the next 3 images will display on the next "row".
Each li in the ul does not just display the image, it displays all kinds of stuff, like so:
<div id="colmain">
<ul class="imagelist">
<li>
<h2>Image title</h2>
<img src="" />
<p>Description</p>
</li>
</ul>
</div>
This works fine in most browsers, except for IE7. IE7 display the images beneath each other instead of next to each other. I know from the classic horizontal menu bar technique that this can be fixed by setting the float to left for the li. This does not work for my situation, because I do not know the height of each li, it depends on content. Wit different heights for each li, some very strange layout situations occur, for example an image sitting on the right of an empty row. Here's a stripped version of my CSS:
.imagelist { border-collapse:collapse; font-size:9px; width:850px; }
.imagelist li { display:inline-block; list-style-type: none; max-width:240px; vertical-align:top; }
.imagelist li a { display:inline-block; position:relative; }
.imagelist li a img, { padding:0; margin:0; position:relative; }
Basically, I just want IE7 to listen to me and respect the inline-block statement, which SHOULD display elements next to each other.
Through a bit of smarter Googling I managed to find this entry:
http://flipc.blogspot.com/2009/02/damn-ie7-and-inline-block.html
zoom:1; and *display: inline; solve this issue. God I hate IE with a passion.
I have a simple CSS help popup that's been working well for me in most simple layouts. But now it needs to work inside a scrolling div.
Given the example HTML:
<div style="overflow:scroll; width:80px">
<a href="#" class="tooltip">
an image
<span>some hidden tooltip which is a bit longer in here</span>
</a>
</div>
(Note: in the real world there will be multiple things with tooltips inside the scrolling div)
I have the CSS:
a.tooltip span
{
display:none;
position:absolute;
padding:0px 0px 2px 2px;
background:yellow;
text-decoration:none;
vertical-align:top;
}
a.tooltip:hover span
{
display:inline;
position:absolute;
padding:0px 0px 2px 2px;
top:0;
left:18px;
background:yellow;
text-decoration:none;
vertical-align:top;
z-index:5;
}
a.tooltip
{
border-width:0px;
text-decoration:none;
}
a.tooltip:hover
{
border-width:0px;
text-decoration:none;
position:relative;
}
Is it possible to have the popup pop out of the scrolling div so it's readable without causing the div to scroll?
Is this achievable in CSS alone, without using javascript?
edit: Live Example kindly provided by Kyle Sevenoaks.
You can set the :hover on the entire DIV. and place your span directly in the div. (This solution does not work in IE6 for example).
see a working example here: http://jsfiddle.net/5mASU/1/
Or you could set i higher z-index to the tooltip and use position fixed, it works:
http://jsfiddle.net/5mASU/3/
also avoid resetting the same values in the hover here is a cleaned up version:
http://jsfiddle.net/5mASU/4/
if for example you set
a {
padding: 5px;
}
a:hover {
// no need to reset the padding here
}
you don't need to reset the padding in the :hover the hover heritages the padding form the style set for the a. Just reset values you want to change between the normal and the hover status.
I don't think it's possible, because z-indexes work from the parent, the child element won't be able to display the span over the top. This CSS tooltip just adds another element when the <a> is hovered. I think you might have to go the jQuery route.
Also, try to post live examples of your problem instead of a long list of HTML and CSS, it's easier for us to help you :)