I'm trying to make a menu in the webpage I'm actually developing, and I've noticed that the css for the menu ul doesn't update as I change code.
It doesn't update in Chrome 37.0.2062.124, but it does in Firefox 32.0.1 when I clear cache (of course, I've tried Ctrl+F5 at Chrome, too). Maybe it's interesting to know that IE 11.0.10 has the same problem than Chrome.
At this point, I want to reduce the text indent from 2.75 to 0.75, to fit text.
Here is the jsfiddle (where it seems to update changes):
jsfiddle
The problem seems to be at
#menu ul,
#menu ul ul {
margin: 0;
padding: 0;
list-style: none;
display: block;
line-height: 2.75em;
text-indent: 0.75em;
}
So I don't know if that is probably an issue caused by Chrome, Apache (I'm using XAMPP 3.2.1 for W7) or any other silly stuff...
Thanks to everyone.
Here is a similar question about apache caching. And here also good article.
Try adding version postfix to your css file, it should force browser to take latest version from server.
<link rel="stylesheet" type="text/css" href="style.css?v=1" />
Or you can add timestamp instead of version.
You can try to use Ctrl+F5, this refreshes the page without using your browsercache.
Related
I'm having some cross browser styling issues with a site I've just loaded up onto a wordpress html5blank child theme.
For example, here's an image layout as it is showing in Chrome -
And this is in Firefox & Safari (how it should look) -
The style code is set correctly as display: inline-block; but Chrome isn't having it.
I also have issues in Safari and Chrome regarding font-weight (showing much lighter than is set) and font-size (smaller than it should be). Is there some method and/or plugin that stops all the compatibility issues?
UPDATE -
I've placed the code on a codepen here
With some help from the responses to this, I figured it out -
.staff .brick {
display: flex;
}
You just need to add
.brick { float: left;}
I tested it in your code pen, and when I inspected the element float: left; was greyed out for some reason. Then I just added the above to your code, and it worked.
Add this to target firefox
#-moz-document url-prefix() {
.brick {
float: none;
}
}
On this site:
http://c3.finearts.txstate.edu
I styled the right sidebar navigation using:
.sidenav a:after {
display: block;
position: relative;
z-index: 0;
top: -3.6em;
left: 0.15em;
width: 90%;
content: ".";
font-family: 'Ropa Sans', helvetica, arial, sans-serif !important;
font-size:1.5em;
padding-top:1em;
padding-bottom:1em;
padding-left:0.7em;
margin-bottom:1.16em;
background-color: rgba(51,50,48,0.9);
background-image: url('http://uweb.txstate.edu/~j_f166/codepen/images/notch.png');
background-position: top right;
background-repeat:no-repeat;
}
.sidenav a:nth-child(n+2) li{
margin-top: -4.4em;
}
In Firefox 3.6.17 it renders like this:
http://www.browserstack.com/start#os=Windows&os_version=7&browser=Firefox&browser_version=3.6&zoom_to_fit=true&url=http%3A%2F%2Fc3.finearts.txstate.edu&resolution=1024x768&speed=2
(it only takes a moment to load...I'm a newbie here so I can't post a screenshot).
although according to caniuse
these pseudo-classes should be supported starting with 3.5.
As an added hassle, I am using our university's content managements system. It's a Magnolia system. I am 99% positive I can't alter the head to insert javascript.
So three questions:
Is there a css fix I can use to get these pseudo-classes working in this and nearby Firefox version?
Is there a polyfill?
If so, where can I insert such a polyfill given that I don't have access to the html head?
Thanks a bunch. Of course I just noticed this (it didn't show up in BrowserShots and I just happened upon it when doing random testing on colleague's machines). The site is to go live to the University tomorrow.
Yay,
Jill
I believe the issue has something to do with Firefox 3.6 not liking how you have li tags inside anchors inside ul tags, not your CSS. It seems to be trying to automatically fix your markup structure, which is then breaking your CSS.
Take a look a the following screenshot from FF 3.6 and you'll see that your anchor tags are being duplicated:
FF 3.6
Now take a look at this screen shot from Chrome where I've recreated the erroneous markup that FF 3.6 is rendering:
Chrome
This COULD be an issue with how your CMS is serving markup to FF 3.6 but I doubt it. My money is on FF seeing un-semantic markup and trying to "fix" it for you.
If you absolutely had to keep the markup that you're using, then you could try looking for CSS hacks for firefox 3.6, or even use a browser sniffing library like WhichBrowser.
However, I would recommend tweaking your CSS to work with markup that looks more like this:
<ul>
<li>
</li>
</ul>
Some browsers will try to "fix" your markup for you if it's not organized in a way that it was expecting, and this structure is more semantic.
I have a Wordpress website built using the Sterling theme and I'm having issues with the menu displaying vertically instead of horizontally in Internet Explorer. I asked about it before here and ended up focusing on jquery errors that didn't fix the problem.
Here's a screenshot of how its showing up on IE9 for me.
Since then I tried changing the doctype to force the site to display properly but I've now realized that all the computers at work have IE9 permanently set to compatibility mode and changing that would mean going through the IT department.
I can't exactly tell my company the website looks wrong on your computers but right everywhere else and I do want to avoid errors for people using old versions of IE since the target market isn't tech savvy people, so could anyone offer advice on how I can get my menu to work right in quirks / compatibility mode?
I don't care if other aspects of the site aren't perfect but its practically unusable with the menu like that. I basically just need it to display horizontally instead of vertically, which I'm assuming is related to the CSS somehow.
EDIT: Added my CSS
The original code in the stylesheet is this
nav > ul > li {
display:inline-block;
position:relative;
}
nav > ul > li+li {
margin-left:28px;
}
And then I customised it slightly in the site options part of the theme (basically means my changes won't get overwritten when I update the theme) and my customization is:
nav > ul > li+li {
font-size:14px;
margin-left:10px
}
I think its something to do with display:inline-block; but nothing I've tried seems to make the menu horizontal again.
What css properties have you used for that ? You should do something like
#menu li {
display: block;
float: left;
width: 200px;
height: 40px;
}
#menu {
overflow: hidden;
}
I know there's a few CSS Reset tools out there, Eric's and Yahoo's to name 2.
However, when I'm using certain tags (I think they're called tags?) such as "li" and "ul", I get some extras in the User Agent Stylesheet. Some of these are:
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
I'm wondering if there's a reset stylesheet out there that deals -webkit etc?
I have searched for one, but with now luck.
While these styles are applied by Webkit, they are over-ruled by margin: 0; padding: 0; located in the CSS resets. You don't have to worry about them.
Note: Although Chrome (Version 27.0.1453.116 m) Developer Tools does not display the user agent styles with strikethrough, the computed styles do reflect that explicit margin and padding values override.
Acctually if you are working with
<ul> in your markup the
reset margin: 0, padding: 0; do not overwrite the -webkit-padding-start: 40px;
I solved the problem by adding to my reset file a
ul {
-webkit-padding-start: 0px;
}
I had the same problem with li and ul, and found the following solution: in my CSS, I had an attribute for the li of my list which was display: inline. I replaced it with float: left and it works. I don't know why...
If user agent stylesheet is being called, it is because the property that is called for / needed was not properly defined in your css stylesheet.
Error check your CSS using a tool like CSS Lint and fix any problems that might be detected before trying workarounds.
I was having this same problem with my <h3> tag. I tried setting margin:0;, but it didn't work.
I found that I was habitually commenting out lines in my css by using //. I never noticed it because it hadn't caused any problems before. But when I used // in the line before declaring <h3>, it caused the browser to skip the declaration completely. When I traded out // for /**/ I was able to adjust the margin.
Moral of this story: Always use proper commenting syntax!
I am currently working on a site at: http://hverdagskupp.no/v4/
I have a CSS problem specific to Chrome. The navigation on the site is made with the following markup:
<nav>
<ul>
<li>Alle tilbud</li>
<li>Bunnpris</li>
<li>Europris</li>
...
</ul>
</nav>
I have the following CSS to make the links color #555:
nav li a {
color: #555;
display: block;
padding-left: 25px;
}
However, when Chrome renders the site, its with the color #222. It says in the inspector that its #555, but its really #222. Chrome is the only browser that interpets the code this way.
Please inspect the code to see what i mean.
Does anyone know why Chrome does this? Or it it a bug in my code?
Thanks!
Added a screenshot. As you can see its actually close to #000. Im using Chrome 8 for MAC.
I'm using Chrome doesn't seem to happen to me see:
Edit:
I can see the color change
It isn't using #222, it is using the #000000 that you specified on the line 2 of "style.css".
Ok, i found the sinner:
a:visited {
color: inherit;
}
This obviously caused this problem, which only occurred on Chrome for MAC.