I have a CSS file that will display a background image in IE, but that same background image won't in firefox. Specifically, its the headerdoc image that's the problem, the one above the menu.
What I'm trying to do is create a main div section and then create the rest of the layout in sections.
Yes, I know you could do this with a table, yuck, ugly hard to manage and even more difficult to maintain not to mention its ugly, hard to manage and even more difficult to manage.
Any help with this would be greatly appreciated.
P.S. Here is what I'm trying to accomplish - I have a page that is the full width and heighth of the screen minus a 2.5% margin around the edges. No biggy here, that's working just fine.
within that container I have a header section called #headerDoc. That should be the full width of the parent container and x % in heighth. It is here that I want to have a background covering the full area of this container.
Within the header section I have a menu section that will comprise just the bottom edge of the #headerDoc parent. say 10% of the bottom. This has its own background so its colored correctly.
After that I'll finish building out the rest of the screen. But that is what I'm attempting to do here.
Here is the CSS data:
/************************* ID's *************************/
#mainDoc {
margin-top: 2.5%;
margin-right: 2.5%;
margin-bottom: 2.5%;
margin-left: 2.5%;
background-color: #494948;
}
#headerDoc {
width="100%";
height="10%";
background-image: url('./images/bg1.jpg');
}
#menu {
/* position: relative;*/
width: 100%;
height: 32px;
margin-top: 50px;
/* font-size: 14px;*/
font-size: 1em;
font-family: Tahoma, Geneva, sans-serif;
/* font-weight: bold;*/
text-align: center;
/* text-shadow: 3px 2px 1px #FFFFFF; */
background-image: url('./images/dpmenu.gif');
/* background-color: #8AD9FF;*/
background-color: #494948;
border-radius: 8px;
}
#menu ul {
height: auto;
padding: 8px 0px;
margin: 0px;
}
#menu li {
display: inline;
padding: 10px;
}
#menu a {
text-decoration: none;
color: #ffffff;
padding: 8px 8px 8px 8px;
}
#menu a:hover {
color: #000000;
}
Here is the html use of the tags
<html>
<head>
<link href="Style.css" rel="stylesheet" type="text/css">
<title>Css Test</title>
</head>
<body>
<div id="mainDoc">
<div id="headerDoc">
<div id="menu">
<ul class="bdr-t bdr-b">
<li class="bdr-r ctr">HOME</li>
<li class="bdr-r ctr">CLASSIFIEDS</li>
<li class="bdr-r ctr">PLACE AD</li>
<li class="bdr-r ctr">DIRECTORY</li>
<li class="bdr-r ctr">HELP DESK</li>
<li>MANAGE ACCOUNT</li>
</ul>
</div>
</div>
</div>
</body>
Sorry about the "=" I missed that one (had a few others I forgot the syntax for, but even after changing those it still didn't make a diff.
Try
#menu ul { ... background-image: url('./images/dpmenu.gif'); .... }
by the way, whats in
bdr-t,
bdr-b,
bdr-r,
ctr css class?
Related
I used to have no problem with the css code i have been using. But, after I have changed from using "Lightbox2" to "fancybox", the spacing between the thumbnails and the thumbnail border (when mouse hovering above) disappeared. What has gone wrong?
Compare the problem page after switching to using fancybox (www.lixiao-art.com/test.html ) with the page using Lightbox2 ( www.lixiao-art.com/latest.html )
This is the code I use:
body { font-family: Verdana, Arial, Helvetica, sans-serif;
color: black;
margin: 0px;
background-color: RGB(181,170,128);}
*{
font-family: Verdana, Arial, Helvetica, sans-serif; font-weight:normal
}
#nav {float: left;
position: fixed;
background-color: RGB(233,231,197);
text-align: left;
font-size: 11px;
color: #645630;
width: 90px;
font-weight: bold;
padding: 100px 20px 100px 30px;
border: none;
min-height: 100%;
}
#content {float: left;
margin-left: 150px;
padding: 15px 20px 10px 80px;
width: 900px;
margin-top: 0px;
border: none;
font: black;
font-size: 11px;
}
#content a {text-decoration:underline}
h2 {height: 2em;}
.footer {
text-align:center;
padding-top: 50px;
padding-bottom: 1em;
font-size: 11px;
}
a{text-decoration: none;
color: #645630;}
a:hover {color: red;}
* {margin: 0;}
html, body, wrapper {height: 100%;}
.ImgBorder img { border:2px solid transparent;
height:100px;
}
.ImgBorder:hover img{ border-color: white}
.ImgBorder {display: block;
float: left;
margin: 30px 20px; }
h5{
clear:both
}
img { border: none; }
Thank you!
In your previous Lightbox2, each image is wrapped in an anchor
<a class="ImgBorder">
and the class ImgBorder has the value margin: 30px 20px
In your current Fancybox, you can just add this missing margin margin: 30px 20px to the class fancybox as each image is now wrapped in an anchor
<a class="fancybox"/>
As I just noticed that there doesn't seem to be any class fancybox already defined, you just have to add
.fancybox
{
margin: 30px 20px;
}
e.g. in your global.css
Update: In case you also want to display the border for the fancybox-images, there are two ways of achieving this: Currently you have both lightbox versions on your test page. For the first image the border is still displayed for hover. Following CSS is taking care about that:
.ImgBorder img {
border: 2px solid transparent;
height: 100px;
}
.ImgBorder:hover img {
border-color:white;
}
for an image markup as follows for your first image:
<a class="ImgBorder" rel="lightbox[gaze]"
href="http://www.lixiao-art.com/work/2014/52.jpg">
<img src="work/2014/52_t.jpg">
</a>
Your current fancybox-markup is like this for your second image:
<a href="work/2014/52.jpg" rel="group" class="fancybox">
<img src="work/2014/52_t.jpg">
</a>
So all you have to add is the border and hover for the fancybox-class:
.fancybox img {
border: 2px solid transparent;
height: 100px;
}
.fancybox:hover img {
border-color:white;
}
It's possible that there are some additional adjustments because of the CSS that fancybox uses, but it's easier if you just check this on your site as I just noticed that you're currently working on it.
At the moment your fancybox images "jump" because you added the CSS
.fancybox:hover
{
border-color:white;
margin:30px 20px;
}
which results in setting this margin on hover (therefore jumping then). I suggest you just try the CSS I posted above, that should work.
Update 2 for the comments follow-up questions:
The attributes class and rel stands for the following:
rel (='related') is an attribute containing information for you previous lightbox. The lightbox script will just fetch the information for e.g. a big image or a link from there.
class: as you noticed, almost all in your css-file starts with a dot (.) followed by a name. This name is the name of the class to which the style information will apply. So .test {color:red;} results in displaying a text red in case it's wrapped in an element with the class test, e.g. a <div>: <div class="test">This is red text</div>.
Update for the margins:
To keep the margins to your images when you remove it for the :hover - the correct way to have the margins is just like that:
.fancybox img
{
margin:30px 20px;
}
As you already have one .fancybox img in your CSS, just add this margin to it, though you can also have these selectors multiple times in a CSS file, it's better to keep the styles applying to an element together.
Thank you very much! You've pointed out the problem with my multiple classes, and I've fixed it accordingly like this:
<a class="fancybox ImgBorder" rel="group" href="work/2014/52.jpg"">
<img src="work/2014/52_t.jpg">
</a>
(instead of making new definitions in my global.css)
But, a small problem shows up: this line shows in red colour in the editor at the backoffice. Is there a problem with this line? but I guess I will open a new thread for this.
Thanks again!
I have a list element with two tags inside of it, anchor tag and a span - tag.
What I'd like to achieve is that when hovering over anchor tag, the actual
background would change to black where as the span tag's background would change to green.
Is this possible with CSS3 or do I need to use JavaScript?
I won't be pasting any code here, since it's pretty straight forward.
Thanks in advance!
Here's the CSS so far:
#left_control_links li a {
font-family: 'Open Sans', sans-serif;
font-size: 14px; padding: 15px 15px 15px 20px;
font-weight: 600; float: left; width: 83%;
color: #dfdfdf; text-decoration: none;
}
#left_control_links li a:hover {
background: #272727;
}
span.list_total_count {
display: inline-block; background-color: #2c2c2c; float:right; min-width: 31px;
color: #fcfcfc ;padding: 5px 0 5px 8px;
font-family: Verdana; font-size: 13px; position: relative; top: 0px; left: 15px;
}
HTML:
<ul id="left_control_links">
<li>
<a href="subjects">Subjects
<span class="list_total_count"><?=$total_subjects?></span>
</a></li>
<li>
<a href="staff_users">Users
<span class="list_total_count"><?=$total_users?></span>
</a></li>
<li>Kyselyiden seuranta</li>
</ul>
Sure
See this example:
http://jsfiddle.net/gWXhJ/
add the parent :hover and apply css added their children
<li>
this is link
<span>Text test</span>
</li>
For the code in question, CSS to change span background color on mouse over:
#left_control_links li a:hover span.list_total_count {
background: none #aaa;
}
I am posting this, cause CSS specificity may have main rule in similar examples. Very good article at: http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
I cannot figure this out. I HAVE DONE RESEARCH so please, no comments about me doing more research. Also, I am a noob, so be nice ;)
Here's my site: http://library.skybundle.com/
Hover your mouse over the two black rectangles in the main blue nav bar (header area). The a:hover should make the color change to a gray. The ISSUE is that in Chrome, this looks perfect. But, in Firefox, the padding-right isn't long enough or something, so there is always a small black rectangle at the far right side of the "Educational Courses" button (this will only be visible when hovering your cursor over the button). In other words, the gray box doesn't go all the way to the right-side end of the button area upon mouse hover. I just don't understand why this looks and works great in Chrome, but bugs out in Firefox...
Believe me when I say I have tried everything I can to fix it using Firebug in Firefox. If you play around with it using an editor in your browser, you will see that if you try to make the padding longer for Firefox, it pops the whole button down onto a new line. So to fix THAT problem, you must make the container wider, but then the original problem comes back. It's a circle of problems and I'm sure one of you geniuses out there will see a simple solution that I am missing.
Please help. Thanks!
EDIT :
Here's my JSFiddle and code. Notice how it looks great in Chrome but not in Firefox?
http://jsfiddle.net/S4st8/
HTML:
<div id="navigation">
<div id="navigation-inner">
<div id="page-nav">
<div id="primary-nav">
<ul id="top-menu">
<li id="li-left">Product Training Videos</li>
<li id="li-right">Educational Courses</li>
</ul>
</div>
</div>
</div>
</div>
CSS:
#navigation {
background: url(http://library.skybundle.com/wp-content/themes/business-services/library/styles/colour-images/mu-nav.jpg) repeat-x;
margin: 0px;
padding: 0px;
height: 40px;
width: 100%;
}
#navigation-inner {
margin: 0px auto;
padding: 0px;
height: 48px;
width: 960px;
}
#page-nav {
margin: 0px;
padding: 0px;
height: 40px;
width: 960px;
}
div#primary-nav {
position: relative;
display: block;
float: left;
margin: 0;
padding: 0;
}
ul#top-menu {
margin: -5px 0.325em 0 0.325em;
position: absolute;
padding: 0;
z-index: 100;
top: 0;
left: 3em;
width: 367px;
}
ul#top-menu li {
line-height: 3em;
list-style-type: none;
height: 49px;
background-color: #2C2C2C;
float: left;
}
li#li-right {
list-style-position: inside;
border-left: 2px solid #5E5E5E;
}
ul#top-menu li a {
font-weight: bold;
font-size: 11pt;
text-decoration: none;
padding: 15px 10px 16px 10px;
color: #ffffff;
}
ul#top-menu li a:hover {
text-decoration: none;
width: auto;
color: #ffffff;
background-color: #505354;
padding: 15px 10px 17px 10px;
}
its because a tags (anchor tags) have a default display property of inline
due to CSS Box Model you would need to adjust your padding and set the anchor tags display property to display:block;
the display block allows the anchor tag to fill the whole space of the LI tag
change ul#top-menu li a to this:
ul#top-menu li a{
color: #FFFFFF;
font-size: 11pt;
font-weight: bold;
display: block; /* add this */
padding: 0 10px; /* add this */
}
the CSS Box Model adds the content + padding + border + margin
https://developer.mozilla.org/en-US/docs/Web/CSS/box_model
Take a look at this CSS rule:
li#li-right {
border-left: 2px solid #5E5E5E;
list-style-position: inside;
}
Dropping list-style-position: inside seems to fix your issue in Firefox (and still works in Chrome), but I haven't tested the implications in other browsers. The CSS rule is documented here.
The reason why : browsers apply their own css if you don't specify it. Firefox added the space for your bullet (somehow)
FF :
list-style-image none
list-style-position outside
list-style-type disc
GooChrome :
list-style-image: none;
list-style-position: inside;
list-style-type: none;
User JasonSperske gave you a fixing solution,
i invite you to RESET your css.
PS. in the meantime, you are invited to see : https://stackoverflow.com/help AND http://sscce.org/
Reading and understanding those pages will give you few reputations points
I believe it's simple, but since I'm new to this I don't have a clue of how to do it. I just want to change the background color of a li tag - just for fashioning, nothing else.
This is my HTML:
<ul id="abas">
<li>PROGRAM</li>
<li>PROC</li>
<li>DDNAME</li>
</ul>
Sorry for being a noob but, this is the css part right?
#abas li a
{
text-decoration:none;
background-color:3B31FF;
color:#FFFFFF;
float:left;
margin-right:20px;
border-top-left-radius:23px;
border-top-right-radius:0px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
-webkit-border-radius-topleft:5px;
-webkit-border-radius-topright:5px;
border-bottom-left-radius:0px;
border-bottom-right-radius:0px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-webkit-border-radius-bottomleft:5px;
-webkit-border-radius-bottomright:5px;
padding-top: 10px;
padding-right: 100px;
padding-bottom: 10px;
padding-left: 10px;
}
I noticed that here>>> "background-color:3B31FF;" is where I change the
color of the background, but doing this, changes all the background colors of course
... I only need 1 "li" tab to change and any html tutorial would be nice too.
Css code:
#abas li {
background-color: ... ;
}
fill in color code where dots are, like this:
background-color:#000000; //color black
Single tag:
Css code:
li.selected {
background-color: ... ;
}
Html code:
<ul>
<li></li>
<li class="selected"></li>
<li></li>
</ul>
First any css color code needs to have # followed by a 6 digit value(or 3 if they are repeating i.e #FF33FF as #F3F) and to solve your second part do this
CSS
#abas li {
background-color: #xxxxxx ;
//your other style goes here
}
#abas li.current {
background-color: #xxxxxx ;
//your other style goes here
}
HTML
<ul id="abas">
<li class="current">PROGRAM</li>
<li>PROC</li>
<li>DDNAME</li>
</ul>
To change the background color simply style it:
<li style="background-color:blue;">Program</li>
You will likely also want to set some height and width parameters.
This will make the first item have a red background:
<li style="background: red">PROGRAM</li>
If you want to for example add green to a <li> tag you can do the following:
<li style="background: green;">PROGRAM</li>
But this isn't really best practice because normally you want to keep your HTML and CSS separated. So in CSS you would do it like this:
li { background: green; }
or use hex color codes:
li { background: #00ff00; }
If you only want to change one specific <li> tag you can add a class to it:
<li class="precious">
and then apply a css rule to this class:
.precious { background: #00ff00; }
and only this <li> tag with the .precious class is going to get styled.
Live Example: http://jsfiddle.net/pulleasy/WEdmt/
You can also make your life a whole lot easier with the border-radius element. for what you are doing it would be:
#abas li a {
text-decoration: none;
background-color: 3B31FF;
color: black;
float: left;
margin-right: 20px;
border-radius: 23px 0px 0px 0px;
padding-top: 10px;
padding-right: 100px;
padding-bottom: 10px;
padding-left: 10px;
}
This will give you the same result. Also for example sake, you will need to add a height and a width to get some sort of result. so if that were the case you would need to do this:
#abas li a {
text-decoration: none;
background-color: 3B31FF;
color: black;
float: left;
margin-right: 20px;
border-radius: 23px 0px 0px 0px;
padding-top: 10px;
padding-right: 100px;
padding-bottom: 10px;
padding-left: 10px;
height: 100px;
width: 100px;
}
This will give you the result that I think you were looking for. If you are looking to use pixels instead of percents for a fluid layout, the you will need to use this. (Note this is only for the width, height and positioning).
#abas li a {
text-decoration: none;
background-color: 3B31FF;
color: black;
margin-right: 20px;
border-radius: 23px 0px 0px 0px;
padding-top: 10px;
padding-right: 100px;
padding-bottom: 10px;
padding-left: 10px;
position: absolute;
height: 10%;
width: 10%; /*Replace these percentiles with your width and height*/
}
I will assume that you know how to make the
An alternative to using hex code is using RGB / RGBA:
background-color:rgb(255,0,0);
background-color:rgba(255,0,0,0.5);
This gives you even more control over your color by adding alpha and transparency support, but unfortunately, it's not supported by some browsers (IE, namely, although I don't know about IE 10).
I apologize for the headline, I don't really know a better way of putting it (let me know if you have a better way, I will change it). Please consider the following code:
<html>
<head>
<title>IE 6 Menu Test</title>
<style type="text/css">
.nMenu {
border: 1px solid black;
}
.nMenu ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.nMenu a {
display: block;
padding: 3px 0px 3px 5px;
background-color: #fff;
border-bottom: 1px solid #eee;
font-weight: bold;
text-decoration: none;
}
.nMenu a:hover {
background-color: #dddddd;
}
</style>
</head>
<body>
<div class="nMenu">
<ul>
<li>One</li><li>Two</li><li>Three</li><li>Four</li><li>Five</li>
</ul>
</div>
<hr />
<div class="nMenu">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
</div>
</body>
</html>
In firefox, both the top and bottom menus display exactly the same. But in IE6, the bottom version, which is identical to the top except for the carriage returns after each list element, displays with extra padding above each element. The top version, without the carriage returns does not. This is especially apparent (the extra padding) when rolling over the items in the bottom list.
It seems that IE6 is rendering the carriage returns for some reason. For now we have just resorted to formatting our code like the top example, but this is less than ideal. Is there something we can put in the CSS to make this look proper in IE6?
Apply display: block; to the li, tell IE6 to make the a 100% in width, and tell all browsers to display the a as a block instead.
.nMenu li {
display: block;
}
/* hack for IE6 */
* html .nMenu a
{
width: 100%
}
.nMenu a {
display: block;
padding: 3px 0px 3px 5px;
background-color: #fff;
border-bottom: 1px solid #eee;
font-weight:bold;
text-decoration:none;
}
Tried it in IE6 and both lists look identical, and renders exactly the same in Firefox.
I don't have a solution to the main issue, but you could change your code formatting to look nicer and still work in IE 6.
<div class="nMenu">
<ul>
<li>One</li
><li>Two</li
><li>Three</li
><li>Four</li
><li>Five</li>
</ul>
</div>
Try adding overflow: hidden; to .nMenu li.