Here is a link to my website.
In Chrome, Opera, Firefox and even the dreaded IE it displays fine, the way I want it to. In Safari, however, the menu appears 11px lower than where it should. I have honestly no idea what I have done wrong, how would I fix this?
Remove display:inline-block; (Safari: line 707)
Try This:
.main-navigation li a {
text-align: left;
color: #C9C9C9;
}
Instead of:
.main-navigation li a {
text-align: left;
display:inline-block;
color: #C9C9C9;
}
Related
I can't figure out why my page div has different spaces on Firefox and Chrome (and Edge). Also, when I open it on localhost, it is even more moved, so I have to move my div more than what I see on localhost.
that part is in a div called "press2" and it looks like this
.press2 {
margin-left:220px;
position:absolute;
top:1000px;
width:580px;
}
The "top" part is what I have had to edit. When I look at the page on localhost (Wampserver) it is still about 100px further away, and overlaps with the review div above it
.review {
margin-left:270px;
position:absolute;
top:550px;
width:400px;
}
Can anyone help me figure this out?
Just use line-height in body
body{
font-family: Arial;
font-size: 10pt;
text-align: left;
line-height: 12pt;
}
I am using CSS to make input button look like a link.
I've styled it like this:
input#linkLike {
background: none;
border: none;
cursor: pointer;
margin: 0;
padding: 0;
text-decoration: none;
font-weight: bold;
font-size: 12px;
display: inline;
vertical-align: baseline;
}
This works fine in Chrome, but there is a whitespace around button in Ff and an even larger whitespace in IE.
http://jsfiddle.net/S4nF9/5/
Where this whitespace comes from, and how can I remove it?
According to this page,
Firefox uses pseudo-elements within the button elements themselves for drawing. As you can see above, this means that padding of 2px is added to the top and bottom of this inner pseudo-element, therefore it may be removed as follows:
button::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner {
padding: 0 !important;
border: 0 none !important;
}
So that's Firefox taken care of. See new fiddle.
(Note: the article mentions top and bottom, but it also works for the left and right padding.)
I don't have IE here, so I can't test that now, sorry.
You could give it a width value.
Was doing some testing with a design I coded and it works well in FF 13, Chrome 21, IE 7/8 & Opera 11.62 for Windows and Safari 5.1 for OS X.
I only have WinXP so I had to use Adbobe Browserlab to test for OS X and IE 9.
Problem is in IE9 and FF 11 for OS X the nav seems to drop down like it's too wide; but it's not, I have checked it.
The URL is: http://www.condorstudios.com/stuff/temp/
Just tried the below changes but still no change in those browsers..
#header .nav ul {
width: 992px; // New
margin: 0px auto; // Changed to 0px margin, but is now centered to get the same effect
}
#header .nav li ul.sub {
position: absolute;
display: none;
width: auto; // Needed to add so it didn't inherit width from above
/*left: -1px;*/ // Removed
top: 45px;
z-index: 1000;
}
Fixed it. Seems those browsers didn't seem to like the text-indent I had on the contact button, so by removing..
#header .nav li.contact {
text-indent: 1px;
}
It now works!
I am having trouble getting a horizontal menu to line up correctly in IE9 and Firefox.
This is what it displays like in IE and Firefox:
And this is what it displays like in Chrome, Safari and Opera:
I keep getting that damn overflow!
What might be the issue?
My CS:
.service-list {
position:absolute;
top:0;
left:0;
display:block;
width:960px;
}
#services-content .service-list li {
float:left;
display:inline;
}
#services-content .service-list li a {
display:block;
float:left;
color:#F37FA8;
text-decoration:none;
padding:0 20px;
background-color:pink;
font-weight:400;
}
#services-content .service-list li a:hover {
text-decoration:underline;
}
#services-content .service-list li.last a {
padding-left:20px;
padding-right:0;
}
#services-content .service-list li.first a {
padding-left:0 !important;
}
The menu is spat out by wordpress.
Thanks,
Nick
Looking at the css on the site you posted. The inconsistency may be caused by your use of font-size:120% on the a tags (line 186 of style.css).
When you pop open firebug in firefox or developer tools in chrome, notice in the 'computed style' section that chrome is rendering 120% as 17px while firefox is rendering it as 16.8px.
How the browsers render this differently is a little out of scope, but you may want to try using pixels or ems instead. Hope this helps.
The issue is that there is a 40 pixel space between each item, and every item is being floated left, and this is making everything wrap when there's not enough room in each line.
You could try changing padding: 0 20px; in #services-content .service-list li a to something smaller, say padding: 0 10px;
I have a minor CSS problem, but I'm having trouble fixing it because I don't have any computer handy with IE7 installed...
In IE8, Chrome, FF, etc. I see this (correctly):
but IE7 gives me this:
the HTML code follows:
<div id="hub">
<div class="title highlight">Faster, Cheaper, Better</div>
<p>PNMS...
the relevant CSS code follows:
#hub {} /* literally nothing */
#hub div.title {
font-size: 4em;
font-style: italic;
font-variant: small-caps;
float: left;
margin: 5px 0px 20px 0px;
width: 940px; /* same as parent container */
}
.highlight { color: #ff6633;}
p {
text-indent: 30px;
font-size: 1.3em;
line-height: 1.1em;
letter-spacing: 1px;
margin: 5px;
}
Based on visitor traffic, I need my site to be compatible with IE7 (thankfully NOT IE6). But again, guessing blindly and then running browsershots.org is not a very efficient manner.
Can someone help? Thank you.
Found this somewhere, it may help:
CSS Double padding IE7 Fix
"Nothing is more annoying than finishing a web design, having it dispay just the way you like it in your standards compliant browser (cough download Firefox) only to remember to check it in IE and find it a garbled mess. Today I came across a rather annoying CSS bug in IE7. IE7 doubles the top padding on my navigation menu."
CSS Code
#nav {
clear: left;
padding: 16px 0 0 30px;
}
"And the fix…
Just add display: inline-block to the div with double padding. That’s it… I know, it’s ridiculous."
#nav {
clear: left;
display: inline-block;
padding: 16px 0 0 30px;
}
Another alternative is the parent of the Div which is not displaying correct add the margin: 0 in CSS for it.
Found it. The CSS body tag had a line-height: 18px;
For some reason known only to Microsoft, out of IE7, IE8, IE9, Firefox 3.5~6, and Chrome, only IE7 honored that instruction for a deeply nested div 400 lines further down the CSS sheet.