CSS - Tried 3 Png Fixes But No Luck, Images Still Have Gray Background.

Please refer to the web site: h*t*t*p://alturl.com/yhba

Please look at the web site mentioned above and pay close attention to the "|" dividing the menu links (About, Events, Teams, Shop).

Problem: This "|" should not appear at the end of the menu (after the "Shop" link). However it seems that it is showing up in the Windows Firefox & Safari but not in Firefox when being run under the Apple operating system.

Please see if it is visible for you and if so, pleassee suggest how I may go about fixing the issue.

HTML:
Code:

<div id="navigation">
<a href="/about" class="navigation-about">About</a>
<a href="/events" class="navigation-events">Events</a>
<a href="/teams" class="navigation-teams">Teams</a>
<a href="/shop" class="navigation-shop last">Shop</a>
</div>

CSS:
Code:

#navigation {
    background:url(../_images/menu_bg.png) repeat-x;
	height:68px;
	width:100%;
	padding:10px 0 10px 0;
	margin:0 0 20px 0;
	}
/*#navigation a { color:#666; padding: 0 10px 0 10px; text-decoration:none; }*/


.navigation-about, .navigation-events, .navigation-teams, .navigation-shop {
    float: left;
    display: block;
    padding: 0 0 0 12px;
    font-size: 105%;
}

#navigation a.last{
background-image: url();
}

#navigation-logo {
	display:block;
	float:left;
	margin:3px 0 0 10px;
	padding-right:25px;
	}

#navigation a, #navigation a:visited {
	display:block;
	text-decoration:none;
	color:#666;
	padding:0 10px 0 10px; 
	background-image:url(../_images/nav_divider.png);
	background-repeat:no-repeat;
	background-position:right;
	font-weight:bold;
	}

Thank you!

Hey all,
I am creating a very simple website with stylesheets. My style works perfectly in firefox, and very close in IE and Safari. Also, I havn't worked with stylesheets much so I'm no master and was looking for any critiques on my method of doing things so I might get better. It felt like I had to use far too many negative margins to get things to sit where I wanted, and I am a bit worried if the page is going to break down when resized or on mobile phones.

The URL Is
h t t p : / / s c h e d u l e r . f p i t e s t e r s . com / s i m p l e s t y l e

(no spaces)

If you load it in firefox (3.5.9) it looks just like I want it to.

If you load in Internet explorer, the text in the body area is far to the right. I do not know why that is happening.

If you load in safari, the yellow bar (the breadcrumbs navigation) floats all the way to the left. I don't know why it is doing that.

If anyone could provide some tips on how to fix those issues, and also feel free to offer any other advice to a CSS newb, I would really appreciate it. thank you.

Okay, i was just messing around with (X)HTML and CSS and was wondering if there was an easy way to do this.

When viewed in Internet Explorer (6 sp1) it shows fine, the floating "menu" to the left extends the "body" division. But if I view it in FF (1.0.4) then the floating menu doesnt expand the "body" division like it does in IE. I usually fix this with (if a page doesnt have a lot of content) a lot of breaks to even it out. But is there an easier way?

URL for the website so you can see it is below.

(There's really almost nothing on it, just messing around with layout)

http://www.omnimist.com

[edit] looked at it via opera and netscape and they're the same as FireFox, but i want it to look like it does with IE...[/edit]

This is where I always run into trouble. I don't know if I'm taking from the right approach but this is what I usually do and I always end up getting frustrated and taking it out of those poor IE users and just removing IE fixes completely.

I usually tackle completely design a site using Firefox and then apply patches as I get around to it ( a round tuit ), but sometimes, a fix will cause other errors and it just ends up in a domino effect until my IE CSS file is bigger than my Firefox CSS and there are still problems. How should I go about this? Should I go to the ghetto with $100 and go around shooting IE users .... or better yet IE development decision makers....?

I found the solution to my IE browser issues. There seems to be a new guide out there with a lot of great comments about it. The last guide I followed had a bunch of people asking for help. Hope this works.

Hi, I have added the following doctype to my XHTML document:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

This fixes several design problems, but my rollovers don't work anymore.
Am I using the right doctype?
here's the site, if you'd like to have a look: http://www.caillouette.com/Utilitrek/eight/services.php

How should I trouble shoot this?

thanks
-S

Hi all, a few quick q's:

1. What is best way to set-up a style-sheet for NN4 CSS? I am using @import, and I want to serve-up a NN4 CSS with link a "link rel"...

2. Can I reley upon Dreamweaver's CSS syntax checking to create my alternative/NN4 CSS? (i.e. DW will tell you if a particular attribute or style is or is-not supported by a certain browser.)

3. What is the best/fastest/your technique for building alternative style sheets (by alternative, I mean a style-sheet to feed to browsers like NN4)?

4. Should I be using the TAN hack for height also? Example:
Code:

* html div { /* This is the Tan hack */
    height: 130px; 
    hei\ght: 100px; }
/* the backslash cannot appear before the letters a to f, and A to F, and numerals 0 to 9 since doing so will turn those letters or numerals into hexadecimal numbers. */

5. (Last q) I am using an image replacement technique for my navigation (using one background sprite to create off/over/active states: INKNOISE)... It works great, except this: In Mozilla FF on PC when page loads, the background images do not ussually load... Anyone got a fix for that? Because I can't seem to find a fix, my best answer would be to create a PHP sniffer and force a page refresh.

Thanks in advance!
Cheers!
Micky

Hello, i have a very strange problem with css.

I want to build a horizontal menu, like tabs.
Here is the link of my site. (sorry, its in russian)
http://eai.w2o.ru/default.aspx

Now you can see red border around the header div.

When in layout.css, I remove the border, the header div changes its position (goes down). (in IE and FF (in FF is a little better)) Can you tell me what is my mistake?

How can I do the same without that border?
Thank you very much!

Hi

I have a table which i want to add 2 background images too.
what i have is. one image with no-repeat at the top. Then for the rest of the table, i want to have a gradient background. Is this possible?

Hi Folks,
I've designed an H1 page heading within a DIV with rounded ends. and HTML text inbetween. It should appear as a horizontally expanding and contracting capsule. I can make one end rounded with a CSS background image in the DIV or the H1 - but how can I do the other? No tables allowed here and it has to be done only in the stylesheet. I've tried a BG in the DIV and a BG in the H1 but they don't line-up, even when there's no padding or margins.

Is it possible to somehow attach an image to one side of an element?
Thanks
John

K. I have my content bg which is to repeat, but I want to put like another background image set to the right in the content box.
HTML Coding
*************
<div id="special_feature_top">
<img src="images/specialfeatures.jpg" width="800" height="30" alt="" />
</div>

<div id="special_feature_mid">
<img src="images/imagegalleryfeature.jpg" width="193" height="178" alt="Image Gallery" />
<img src="images/jointodayfeature.jpg" width="193" height="178" alt="Join Battle Glory Today!" />
<img src="images/forumsfeature.jpg" width="193" height="178" alt="Forums" />
</div>

<div id="special_feature_btm">
<img src="images/specialfeatures_btm.jpg" width="800" height="30" alt="" />
</div>


CSS Coding
*************
#special_feature_mid {
padding: 1px 0px 1px 10px;
background-image: url('images/content_bg.jpg');
}

That's the coding for the image now just with the content_bg. Now the other image I just want set to the background also so text can over lap or other images. It's a really nice opacity image that blends in perfect. I just want it in background also positioned to the right. thanks

Matta

Is there some way to rig CSS to display 2 separate background images. I wanted to put the 2 images on opposite sides. I tried, but both IE 6 and Firefox 1.0.2 displayed only 1 bg image. Anyone got a suggestion?

Edit - Oh yeah...this is for the BODY tag. I thought I ought to mention that.

Hello, as the subject states I have a question about whether IE can display a background image on a tr and a td correctly. I have a table row with a repeating background then in the first cell in that row I have another background image that goes in the top left corner with a transparent background color on the cell so that the tr background can show though.

This works as it should in all browsers except IE where only the td background image appears and its transparent to the page background not the tr background.

This is the css:
Code:

.professor_forum_row {
	background: #ffffff url(../images/author_post_background.jpg) repeat top left;
}

.professor_corner_tab {
	background: transparent url(../images/article_sticky_author.jpg) no-repeat top left;
}

the html is just a table with those classes assigned to the row and first td.

Any ideas on why this is happening?

Thanks,
Ryan

Hello, I'm new to Dev Shed, I hope I won't seem like a fool here


Is there any way to have to background images?
I mean, I want to have a heading background image, and a footer background image to the same table.

longing to your replies>>>>

I have a site that will be relying heavily on background images sitting behind all the tables. These backgrounds will work in concert with the overall background-color: property.

My question is this, on the style sheet, of which I would like to have ONE. Is there a way to change entire background-images for each page within the site.

In another post, we went over how to change images within the same <div> by simply making the <div> a holder and swapping the image on each page by using something like:

<div id="image" class="page_two">

Is there a way to do something similar using an entire background image? Or do I need a separate style sheet for each page? Perhaps the main style sheet which has a body like this

body
{
margin:0px;
}

and then attach an additional style sheet to each page that supersedes the body tag in the main sheet?

I hope I am making sense...


thanks

jon

Hi there,

hopefully someone can help me out with some background image issues. I simply want a right hand section on my site, where i can fill it with content and it can expand appropriately as per the content and display a top, middle and bottom background image.

this is because the style of the site has curved edges, so this will be a top image with the curves, a centre image and a bottom image with bottom curves.

here is my code but none of the top or bottom background images show.

please help, thanking you in advance.

css:
#feature {
float:right;
width: 287px;
height: auto;
}
.featuretop {
background-image:url(../images/css/featuretop.gif);
background-position:top;
background-repeat:no-repeat;
}
.featuremiddle {
background-image:url(../images/css/feature.gif);
background-position:center;
background-repeat:repeat-y;
}
.featurebottom {
background-image:url(../images/css/featurebottom.gif);
background-position:bottom;
background-repeat:no-repeat;
}


html code:
<div id="feature">
<div class="marTOP10">
<div class="featuretop"></div>
<div class="featuremiddle"></div>
<div class="featurebottom"></div>
</div>
</div>