PDA

View Full Version : CSS Style Sheet Background URL



Ottomated
Jan 25th, 2010, 05:43 AM
Hi,

Recently I went from including CSS directly onto the HTML page itself to having a dedicated style sheet file on the directory. When I did that the background modifiers stopped working. All the positions were correct but my div tags were all white.

I found out my background url needed two periods in front.
like this:

background-image: url(../images/topbar.png);

When I looked up online, all of the tutorials do not mention about the two periods. When I had my CSS stuffed within my HTML file the background modifiers did not need the two periods. Was wondering what was causing this issue. What the significance was to different types of servers etc.

http://student.seas.gwu.edu/~ottobahn/test.html

Ottomated
Jan 25th, 2010, 07:02 AM
also, when I preview the page strictly in IE7 and IE6, the navigation bar does not stick to the top of my content area. they kind of float slightly above. In IE8, this problem does not seem to show up. Could someone help me with this issue also?

I realize IE6 is showing up my PNG images with gray boarders. Ugh IE....
how do I fix this?!

http://i56.photobucket.com/albums/g165/Ottomated/Sample.jpg

Excavator
Jan 25th, 2010, 07:04 AM
Hello Ottomated,
Research Absolute and Relative Paths (http://webdesign.about.com/od/beginningtutorials/a/aa040502a.htm).

Excavator
Jan 25th, 2010, 07:07 AM
also, when I preview the page strictly in IE7 and IE6, the navigation bar does not stick to the top of my content area. they kind of float slightly above. In IE8, this problem does not seem to show up. Could someone help me with this issue also?

I realize IE6 is showing up my PNG images with gray boarders. Ugh IE....
how do I fix this?!

http://i56.photobucket.com/albums/g165/Ottomated/Sample.jpg

Probably a default margin on your nav? Hard to say without seeing your site.

.png display issues can be fixed with a little js. Google pngfix for lots of examples.

Border can be eliminated with something like this

#header img {
border: none;
}

Ottomated
Jan 25th, 2010, 08:17 AM
hello excavator

thanks for your help. the relative path/absolute path link helped me alot and solved the problem right away. I realized I had my CSS style sheet within a separate folder and that was the reason why it needed the ../ to refer up a directory.

I also plugged in some IE6 png fixes and it solved the problem right away as well. Oh and I also removed the space so there is nothing between my navigation and content now. HAHA its been a productive day.


Only other thing that is bothering me is the fact that, in the navigation bar, the submenu's arent exactly lined up to the parent menu by their center line. I have an arbitrary defined location in my css style.


I was wondering if I could fix that and have them be lined up to their parent menu by the center line. I tried doing all sorts of things to the menu but anything i did would break the menu from working. if you had any ideas about it, please guide me in the right direction. thank you once again.

Excavator
Jan 25th, 2010, 08:21 AM
Only other thing that is bothering me is the fact that, in the navigation bar, the submenu's arent exactly lined up to the parent menu by their center line. I have an arbitrary defined location in my css style.


I was wondering if I could fix that and have them be lined up to their parent menu by the center line. I tried doing all sorts of things to the menu but anything i did would break the menu from working. if you had any ideas about it, please guide me in the right direction. thank you once again.

Would definitely need to a link to the test site for that.

Ottomated
Jan 25th, 2010, 06:04 PM
http://student.seas.gwu.edu/~ottobahn/test.html


above is the link. only test.html is the latest. others are outdated.

Excavator
Jan 25th, 2010, 06:22 PM
Good morning Ottomated,
Play around with the positioning on that too. I just guessed here but you can easily adjust it more to your liking. Does not have to be a negative measurement, can be 0 or positive as well. -

#navigation li ul {
margin:8px;
padding:0px;
display:none;
position:absolute;
left: -20px;
top:17px;
line-height:30px;
font-size:13px;
}