I have a small problem with a horizontal menu I have implemented for a website. The menu only contains three items, but when viewed on quite a large widescreen monitor, the last item appears to collapse on to a new line. I can't actually test this myself as the widescreen monitor is used by my client, and whilst I can't reproduce the error they have sent me this screenshot.
The client is using Internet Explorer 8 on Windows 7, and I have tested this browser and OS on a normal size monitor which seems to work. It seems to be the widescreen that is the problem.
Here is how the page looks on my screen, and every other subsequent screen I've tested on.
Here is the code I have for the menu.
HTML
<div class="menu">
<ul class="nav">
<li class="nav-item" id="first-item">WHY US</li>
<li class="nav-item">LINKS</li>
<li class="nav-item">CONTACT</li>
</ul>
</div>
CSS
.nav-item {
font-size:2em;
margin-left:175px;
}
.nav-item a {
color:#2B2F73;
}
.nav {
list-style-type:none;
padding:0;
margin:auto;
width:744px;
}
.nav li {
list-style-type:none;
float:left;
display:inline;
}
#first-item {
margin-left:0px !important;
}
.menu {
width:960px;
height:40px;
margin:auto;
}
Can anyone identify any glaring errors in my code that may be producing this error?
try reducing some width in .nav-item, .nav and .menu
If this does not helps you, then can you please provide the link where this is been hosted. So that we can check ther and quickly reply to you.
The problem is that they've got their "Text Size" set to "Larger" (or perhaps "Largest"):
Your code is here, and it looks exactly like the client's screenshot with "Larger" text in IE8.
Now you can reproduce the problem, you should be able to fix it.
I'd provide better instructions, but it's difficult to do so without being able to see the entire site.
The "widescreen monitor" part is not relevant - you're declaring width: 960px on the outermost container (.menu). It will be 960px no matter what the screen width is.
Try this
.nav-item {
font-size:2em;
margin-left:5em;
}
Granted, if the chrome (the user's browser) increases their text size too much, no matter what it will eventually break if you use ems as they are of course based on the text size.
<subjective>
In general, its best-practice to use percentages for text-sizes and use pixels for margins/padding/distances for best consistancy between browsers.
Also using a reset css (like YUI base-reset-fonts.css) is a good idea too
</subjective>
I'd suggest to play a bit with your width tags.
What about removing the one in "nav" ?
I'm sorry this is not a question to ask here. This problem is very easy to solve, you can figure out yourself if you try to change things...
My best advice on this question is that you get a decent tool to "test" CSS and see the result "live".
I'm happy with the Firefox/Chrome FireBug extension (but it doesn't save the result, you have to copy&paste it).
Related
Wondering if anyone can help with an IE8 issue, I've searched high and low and tried many different things. On a WordPress site for a client, an input text box appears much smaller than it should, and off to the side of the page, as compared with all other browsers I've tested.
You can see a grab of how the page looks on IE8 (on Windows 7) here:
http://perfectitaliano3.fonterra.safecom.com.au/wp-content/uploads/grab2.jpg
If you compare that to the page http://perfectitaliano3.fonterra.safecom.com.au/recipe/potato-rosemary-and-speck-pizza/ in a modern browser you’ll see the width and placement of the search box and filter dropdown menu at the top right is all messed up.
I'm a bit a noob at IE8 issues, but I’ve tried changing the css, patching it with modern.js, html5 shiv, modernizr, all sorts of things, but nothing makes any difference!
If you have any suggestions please let me know, thanks.
Try this
#top #s{
height: 40px;
padding: 0px 47px 0px 5px;
}
Thanks so much for answering #Jenti. I tried your suggestion but it didn't seem to work, although because it's now live I tried it in the developer tools in a virtual machine version of IE8, so one can never be sure ;)
However I've since found a solution, I added the following:
#searchform > div {
width: 500px;
}
#s {
display: table-cell !important;
}
and that seemed to do it. Thanks again and appreciate it.
I'm writing a responsive wordpress site. I'm using the bones theme template. The grid system included worked pretty well on most of the site, but I found I needed differing number of columns on different screen sizes for a particular page.
To do this, I used a bit of scss that looks like this:
(base media query)
section{
display:table;
float:left;
margin-left:0;
width:100%;
}
(media query for 768 px and above)
section{
height:150px;
width:48.618784527%;
&:nth-child(3n+1), &:nth-child(2n){
margin-left:2.76243%;
}
&:nth-child(2n+1){
margin-left:0;
}
text-align:right;
}
(media query for 1030px and above)
.pracareas{
section{
width:31.491712705%;
&:nth-child(2n+1){
margin-left:2.76243%;
}
&:nth-child(3n+1){
margin-left:0;
}
}
}
And HTML like this
<div class="pracareas">
<section>... content</section>
<section>... content</section>
<section>... content</section>
<section>... content</section>
</div>
This works great on desktop browser and Android. But on safari I get something like this:
What's really strange is that if I refresh and/or rotate the ipad to portrait or vice versa, I get this:
But if I click on a link leading to this page or visit it directly (typing into the url bar), the layout is messed up until I refresh or rotate.
I'm probably going to abandon this approach and go for fixed number of columns above mobile because this seems really messy. But I thought I'd ask since it is only not working on a single browser.
That's because not all browsers render decimal values of width in percentages the same way.
Another approach could be to set breakpoints with media queries in order to target different devices.
Also try to round a bit those values and see if you manage to get an acceptable result.
See this: Are the decimal places in a CSS width respected?
Browsers handle percentages differently, it would not be wise to put too many decimals places straight into the layout. Browsers either round up or down, so you can try to round it up and see if you find a solution.
Here is CSS
#content {
margin-left:190px;
margin-right: 10px;
overflow: auto;
}
Firefox & Opera result
Chrome Result
Tried to manually set #content's width param to 90%. It 'fixed' issue.
Can anyone explain why this problem occurs and how can I fix it?
Note: Css for left side bar is following
#left {
float:left;
width:180px;
}
We don't have any idea about the code structure you have, Please make a [fiddle] http://jsfiddle.net with minimum test case.
Check if your table inherit any float or width.
Hard to say without seeing code, but if those are tables you are using, one place you might possibly find answers (along with creating a minimal test case) would be looking into how different browsers handle tables/table css differently. Historically, styling tables has always been a little bit inconsistent between browsers.
I'm doing some styling for a printable brochure on my client's site, which could potentially contain long unordered lists of information.
My issue is when printing in Firefox the entire <UL> will break on to a new page instead of it's children <li>'s splitting, which means it doesn't flow with other content on the page.
I've found the CSS property page-break-inside is only supported in Opera and IE8, does anyone know of an alternative to this property or another method that I can use to prevent the entire list breaking on to a new page.
Cheers!
UPDATE [23.11.2011]:
I was able to use a work around on my issue, as the printed document is generated in response to a user's selection so this page is only ever going to be print I (very reluctantly) pushed semantics aside and removed the UL and replaced LI's with DIVs, which break correctly. The question still stands though, for anyone with a similar issue but using the same HTML for print & screen.
I will reproduce the problem I was having and post the necessary HTML & CSS as soon as I can.
Consider programmatically removing the UL tags for the print version. You should be able to get the LI elements to display the same with some styling.
JavaScript or even jQuery can handle this easily enough but I bet you could take care of this server side instead.
I know it's not technically valid HTML but sometimes you have to bend the rules when HTML/CSS doesn't offer you flexibility.
Credit goes to david walsh blog
#media screen {
.page-break { height:10px; background:url(page-break.gif) 0 center repeat-x; border-top:1px dotted #999; margin-bottom:13px; }
}
#media print {
.page-break { height:0; page-break-before:always; margin:0; border-top:none; }
}
For slightly better browser support you could use this:
ul li {
page-break-after: avoid;
}
ul li:first-child {
page-break-after: auto;
}
Should work in IE7 too. But won't work in Firefox. Browsers just suck when it comes to printing.
Given IE6, an UL-LI list and a background image for the UL container.
<style>
ul {background-image: url(images/bgr.png);}
</style>
...
<ul>
<li>...</li>
...
</ul>
When I load the page, the background is randomly loaded, some parts are visible, some are not. Moreover, it changes on runtime when I'm scrolling on the page. When I scroll out the UL list and scroll back, different parts of the background will be visible, depends on the speed of scrolling.
Do you have any idea? Thanks in advance.
IE6 struggles when it comes to using .png files full stop. There are various suggestions for fixes, but unless you have a specific reason for using a .png file (for instance transparency) I would suggest using a different file format. I've worked around it before by detecting when I have an early version of IE and substituting a .jpg for the .png file I wanted to use, so that most users with up to date browsers get a .png background but IE users get a .jpg.
I've encountered similar problem some time ago (but it was simple background-color, without image) and if I remember correctly, adding position:relative to parent element solved this. So something like this:
<div style="position:relative">
<ul>
<li>...</li>
</ul>
</div>
Does li float or something?
Try putting...
ul
{
zoom:1;
overflow:hidden;
display:block;
}
height:1%;
You can use this to fix