I have a website which has to be working on all browsers. I am designing a menu like the below image
I made this menu by using the following html and css code
Html
<ul class="menu">
<li><img src="images/ico1.png" alt="home"><span>Home</span></li>
li><img src="images/ico2.png" alt="products"><span>Products</span></li>
<li><img src="images/ico3.png" alt="Quality Assurance"><span>Quality Assurance</span></li>
<li><img src="images/ico4.png" alt="Gallery"><span>Gallery</span></li>
<li><img src="images/ico5.png" alt="Contact"><span>Contact Us</span></li>
</ul>
Css
.menu { float:left;}
.menu li {float: left;padding: 19px 45px; background:url(../images/seperator.png) no-repeat right;}
.menu li.last{ background:none !important;}
.menu li a { text-decoration:none; color:#553614; font-size:18px; font-family: 'fengardo_neueregular';}
.menu li a:hover{ color:#fff;}
.menu li span { float: left; margin-left: 5px;margin-top: 9px;}
It works perfectly in chrome, Ie9, firefox etc. But when i check in Ie8 the menu is collapsed like the below image
How do i rectify this error?
don't have ie8 at my disposal currently, but after looking # your markup/styles here are my thoughts:
1. the misalignment is more than likely margin-padding issues...looks like there is not enough room for the spans on the same line as the icon, and this break is amplifying it because once the spans are pushed off that line, they have margin-top declared, which is just pushing them farther away.
You have a few options here: 1st of all, target the menu in IE8 with conditional comments; illuminate the involved elements (i like to use contrasting bgs/borders/etc., whatever makes each element stand out from the group) and inspect them in F12...if the answer(s) isn't obvious off the bat, start comparing physical pixel sizes to another browser. So if you use Chrome in this case...you can find an element's dimensions by hovering over if Developer Tools are open...how does Chrome's size(s) compare to IE8's size(s)? If they sizes are not disparate, repeat this process for the same elements, only checking positioning, layout, padding, and margins. (# least) One of these should not match up to the other browser. You're going to want to compensate for the user agent rendering differences, and this is achievable using the conditional comments we've already used to target the menu. So lets pretend that all the li elements are vaguely 130px wide...if you notice that they're only 115px in IE, apply 15 more pixels of width to IE8 and only IE8 via the cc's.
i'm rambling bc i suck, but i'll try and wrap this up...your markup example is missing an opening bracket on the second li, prolly want to fix that first before you do anything else.
ditch the padding on the lis. also, apply display:inline to them and make your anchors display:block; float:left...that's a super easy to way to get rid of and/or test margin/padding issues.
i'd also place the icon into the a as background-images...that's me being particular, but that's actually a solution to your problem too...the spans can't collide with the imgs if there are no more img elements in the markup.
another possible easy solution here: the spans are floating left and applying a left margin...simply having the float:right could be a solution; floating them right and ditching the margin-left would be my second attempt, if simply float:right didn't resolve it.
Related
The content of my webpage is going behind the side menu I have positioned to the left.I want the menu to be fixed however whenever I do so the content hides behind the menu to the left. Any help would be much appreciated. (Apologies for formatting, new to the site.)
.menu {
padding-top: 150px;
height: 100%;
width: 170px;
background-color: white;
float: left;
display: table;
position: fixed;
}
Fixed elements are no longer within the page flow, they act in the same way as an absolute positioned element. Chris Coyier has a really good explanation about the differences in positioning http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
In order for your body content to stop flowing behind the fixed property, you need to create a container (if one does not exist yet) that all of the body content resides in, except of course the nav/menu bar. You then apply a padding-left to the main body content equal so the width of the fixed element so that the main body content is always padded away from the left of the browser.
Fixed elements don't affect the flow and positioning of elements and position:relative on a parent container has no affect on a fixed element.
I've been working on this site http://minta.jvsoftware.com/ and I have a problem in FF/Linux, everything looks fine but the search button is showing at the bottom of the search box, I assume it's because the spacing of the elements in the top bar are too wide and since they're all floated to the left it jumps to the bottom for lack of space.
The problem is I can't debug properly since I don't have a linux distro available for testing (I used browsershots) so I was wondering if anyone on linux could point me in the right direction, I'm almost sure that if I reduce the right margin on the address it'll fix but I'm not sure by how much.
Thanks in advance!
The best way to make a horizontal menu that has a minimum of cross-browser hassles is to use the following pattern:
<div class="menu">
<ul>
<li>SOME TITLE</li>
<li>link1</li>
<li>2</li>
<li><input type="text" .../></li>
<li><input type="submit" class="submit" value="Submit"></li>
</ul>
</div>
CSS:
.menu ul, .menu li {
list-style=type:none;
padding:0;
margin:0
}
.menu li {
display:inline-block
}
.menu a {
display:block;
....other styles....
}
You started off this way in your menu for the store hours, then half-way you went to DIVs.
If you continue this pattern using <li> to wrap each item in your menu you'll find that things will work out fine.
Well the main issue was that I wasn't setting the text input's width in the css so the browser was rendering it with the default settings making it too large, but will definitely keep in mind Diodeus solution on using li instead of p tags for this kind of stuff.
I'm trying to wrap my head around CSS positioning guidelines. I'm trying to figure out how to make a sticky footer but have it stop being sticky when the main content area can no longer be condensed. An example of what I'm talking about can be found here http://ryanfait.com/sticky-footer/. Can someone explain to me why the footer stops being sticky and particularly what CSS properties cause this to occur? For me, as I look at the CSS it looks like the footer should just stay sticky to the bottom of the browser window always, but this isn't the case here. Why?
Thanks for the help.
Give this one a try.
http://www.cssstickyfooter.com/ (link no longer valid)
It is similar to Ryan's one but, from memory, I think I've had better luck with this (although both are very similar).
You have to declare the footer outside of the wrapper and give some height for footer and margin-top should -(footer-height)px
<div id="wrapper">
---
------
</div>
<div id="footer">
</div>
# wrapper {
width:100%;
height:100%;
}
#footer {
width:100%;
height:25px;
margin:-25px 0px 0px 0px;
background:#ccc;
}
Here's a brief summary of a layout I use fairly consistently as a basis for projects that require a sticky footer. Not sure where I initially got all the code from but it was pieced together over quite a while.
http://jsfiddle.net/biznuge/thbuf/8/
You should be able to see from the fiddle that you require a '#container' element which will wrap the whole of the page. this gives you 100% height (note the hacks for ie present in the css), and allows and child elements of this 'container' element to derive a height, or position relative to it.
Pitfalls of this method are:
You need to provide some padding/margin at the bottom of the '#main'
element so that the footer is displaced further than it naturally
would, so need to know at least a broad range of what your footer
height should be.
IE doesn't seem (<=IE8 not tested 9) to recognize browser resize
events if you only resize the bottom edge of the browser, so in
that particular case the stickiness would fail, until a horizontal
resize was also presented as an event.
if you want a fixed width to the layout you should place this
constraint not on the '#container' element, but on the '#page'
element, and perhaps introduce extra elements beneath '#footer' to
provide any width constraints there.
Good Luck!
I have div containing multiple divs and text. The inner divs are alternately floated left and right and the text flows along side them in all browsers (including IE8) except for IE7. In IE7 the text is pushed to the bottom so that it is aligned with the top of the final inner div. I have tried all sorts of solutions and have read a good article on the subject
However, I'm still unable to prevent the text from being cleared in IE7. Here's the relavent HTML (please note this div is nested within an HTML table with a specified width as it is a legacy site. I have tried pulling the div out of the table, but the same behaviour occurs anyway):
<div>
<div class="left"></div>
<div class="right"></div>
Text goes here
<br />
Text goes here
</div>
And CSS:
.left { float:left; }
.right { float: right;}
I have tried applying display:inline, display: inline-block, clear: none, overflow: hidden, specifying widths, position: relative to the containing div, various hacks such as IE7 conditional with zoom: 1, min-width: 1% - basically hours of pulling my hair out and dredging Google for answers but I haven't found anything that works. Has anyone encountered this problem before and got a fix for it?
(for testing i am running IE8 in compatability mode in Vista)
I am sure of the headaches that IE7 brings. Thank God that it is much better than IE6, but it was a headache for me in many situations.
In this case I recommend that you generate IE7 specific code using tables!
Having major issues getting my wordpress website to display correctly in IE6.
Link to screenshot below. My background image is missing, the nav is knocked down a few extra pixels, and most of my content is off center.
www.genevarealtytrust.com/content/wp-content/themes/wp-terra-basic/images/ie6_wpterra.jpg
FF screenshot (linked below) is what it should look like. Have tried in Safari, a couple versions of Firefox, and IE7, and all look just the way that they are supposed to. IE6 is the only one giving me trouble.
www.genevarealtytrust.com/content/wp-content/themes/wp-terra-basic/images/ff_wpterra.jpg
Any ideas??
Link: www.genevarealtytrust.com/content
I've validated my code, and have tried a few things, but no success.
Help! Appreciate it!
You can try using conditional styles. In document's head section paste:
<!--[if lte IE 6]>
<link rel="stylesheet" media="screen,projection" href=www.example.com/ie.css" type="text/css" />
<![endif]-->
Now You can start editing ie.css without worrying about spoiling design for other browser.
Extra space around nav: IE sometimes has default margins/paddings different from other browsers. Try defining
#something {
margin: 0;
padding: 0;
}
explicitly in Your new css.
No background: Maybe it's the alignment. Try adding somethig like "top left" to Your background-image definition. Example:
background-image: url('../img/site-bg.jpg') no-repeat scroll top right;
Content centering: In CSS there are two ways to center content. First: setting the parent element text-align property to center;. Second: Defining width and setting margin to top-bottom-margin-value auto;. Example:
#something {
width: 100px;
margin: 10px auto;
}
I hope this will help solve any of Your problems :)
This isn't really an answer to your question (and since I don't have enough rep to comment :) ), but try running through this list of common IE CSS bugs. It's helped me work out some kinks in my CSS, but IE 6 is a warzone. Otherwise, I'd really suggest getting the fantastic book Bulletproof Web Design.
Thanks for the tips guys! Daveslab, I'll definitely keep that list handy, and thanks for the book recommendation.
Centering Issue/Missing Background Image:
I made the alternate css doc and that gave me more room to experiment - I was able to resolve the missing background image and centering issue by simplifying the CSS a bit for the problematic section by trial and error. (removed float, position...)
Extra pixels:
What finally ended up fixing the 3 pixels on the bottom of my header was... just stupid.
Evidently IE6 was applying an extra 3 pixels to the bottom of the header image because my html code for that div was split into 3 lines...
<div id="header">
<img src="url" />
</div>
I just had to combine them all into one line, and the extra padding on the bottom disappeared. Dumb... (and ugly)
<div id="header"><img src="url" /></div>
I still have an extra pixel on the right side that I'm trying to resolve - still investigating.