Cross browser compatibility help

[meowbits]

Hello, I am working on a simple website for a class. So far I have most of the layout finished. There is one problem that I have run into and am unsure of how to solve.

The "feedback" image gets pushed to a new line when I open my webpages in internet explorer. It works fine in firefox.

http://comweb.cs.ndsu.nodak.edu/~hanso122/capstone/home.html

If anyone knows the solution to this, please let the know.

Thanks!

[Dandello]

I'm not seeing it on my monitor (1920x1080)

And I can only reproduce your complaint if I turn off 'min-width' using developer's tools. Since your min-width is the same as your max-width - just set your width to pixels.

[meowbits]

I changed that, thanks. I'm still getting the problem though.

*Also, my shadowing effect is lost on internet explorer. Anyone know off the top of their head what the solution this is? ty

[simplypixie]

I see the problem in Chrome as well. Firstly can you post your css and secondly a great way of checking problems like this is to add temporary borders to your divs/classes so you can see where the overlaps are actually happening.

[Dandello]

Odd, I thought I posted a reply yesterday - IE has issues with things like text-shadowing. Doesn't do box-shadowing very well either, but there is a filter for that.

I do see the problem on a smaller monitor in IE9. Part of the problem may be that you currently have the contain div set to 1260 px, which is smaller than the items that need to go inside - When I disable the width using IE tools, the nav boxes slide into one row shifted to the left but the content box becomes 100% wide.

[meowbits]

Sorry for the delayed reply. This is the CSS I am using.

@charset "utf-8";
/* CSS Document */

html {
}



/* Used to apply background to unused portions of page */
body {
	background-color:#F5F5F5;
}



/* General holder of all other divs - second body */
.container {
	width: 1260px;
	background:#D3E2FF;
	margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container's width to 100%. */
}



/* Div that holds all buttons in the header */
.header {
	padding-bottom:100px; /* Format according to button height */
	background:#F5F5F5;
}



/* Div that contains border effect and content */
.content {
	border-top:thin double #8080FF;
	border-left:thin double #8080FF;
	border-right:thin double #8080FF;
}



/* Indenting paragraph of content div */
.content p {
	padding:0px 10px 10px 10px;
	margin:10px 10px 10px 10px;
}



/* Blue bar at botton */
.footer {
	margin-top:-10px; /* Format footer to align with content */
	background:#3030FF;
	text-align:center;
	font:9px "Times New Roman", Times, serif /* Font family and size */
}



/* a attributes apply to the right image (directly right of text) of the header buttons */
a {
	background: transparent url('images/double-button-short.gif') no-repeat top right; 
	float:left; /* Align left to right */
	height:100px; /* Image height */
	margin-left:3px; /* Spacing between buttons */
	margin-top:1px; /* Formatting to shift all buttons down */
	padding-right:45px; /* Image width */
	text-decoration:none; /* Prevent text underline */	
}



/* a span attributes apply to the left image (holds text) of the header buttons */
a span {
	background: transparent url('images/double-button-long.gif') no-repeat; 
	display: block; /* Retain button height since we use line height instead of height */
	padding: 7px 0 5px 45px; /* Formatting header image */
	font:18px "Times New Roman", Times, serif; /* Font family and size */
	font-weight:bold;
	line-height:88px; /* Stretch image to fit properly */
	color:#F0F0F0; /* Image text color */
	text-shadow:-1px -1px 1px #000; /* Text shadow effect */	
}



/* Changes color of buttons - applies to mouse hovering over buttons, and current webpage */
a.button:hover span, a.activeButton span {
	text-indent:-4px;
	padding-right:4px;
	text-decoration:underline;
	background-position:0 -100px; /* Image file contains two images, shift image down 100px to reveal second image */
}
a.button:hover, a.activeButton {
	background-position:100% -100px;
}

I will add borders to the elements shortly. Thanks for the replies.

[Arkinder]

As Dandello said, part of the problem is that the container is smaller than the total width of its child elements. The other part is that the browser window is also smaller than the total width of said child elements.

Try increasing the width of the body and make changes accordingly - such as increasing the width of the container.

body {
    background-color: #F5F5F5;
    width: 100%;
}

Regards,
Arkinder

[meowbits]

Thanks, i've been extremely busy lately so im just now getting around to it. I endded up changing the image size so that it would fit properly. Does anyone know what to do with the shadowing effect for internet explorer?

[Dandello]

IE supports box-shadowing using a filter (

-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#333333')";

) (set your direction, strength, and color to match the standard code - or as close as you can get.)

IE9 does support box-shadowing and rounded corners.

Text-shadowing isn't supported at all yet although some people claim to have hacks and work-arounds. Personally, I haven't gotten any of them to work.

[meowbits]

I tried using that but since I have background images with my text, it shadows the image haha.

Thanks for the suggestion though.

[Dandello]

Well, text-shadow and box-shadow are two different things. And IE doesn't support text-shadow (maybe when IE10 or 11 comes out.)