CSS Positioning and IE 2

[Evil8]

My pages are coming along but as we all know EI doesn't like to play well with CSS. I've been testing my pages in IE 7 & 9 and both of them are mashing the pages up against the left side of the browser window. Is there a simple work around to make IE move everything to right just a little so the pages are a little bit more readable? Things look ok in Chrome, Firefox and Safari.

Thanks!

 

[vacunita]

There may be, but without knowing what your CSS looks like its hard to tell. IE7 may present some issues, however IE9 is pretty close to standards, so anything wonky is probably down to weird or unsupported CSS on IE. It still a little behind in CSS3 compatibility.


----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[Evil8]

Here's all my css:

html, body {
margin:0;
padding:0;
}

body{
color:#333333;
font-size:10pt;
font-family:Arial, Helvetica, sans-serif;
background:white;
}

p {
margin:0 0 0.5em 0;
padding:0;
text-align: left;
}

h2{
font-family: Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
color:#039;
margin:0;
padding:0;
}

h1{color:#039;}

/* ------------------------------
PAGE STRUCTURE
------------------------------ */

/* #container */

#wrap{
width:800px;
margin:0 auto;
background:#FFFFFF;
}

#header{
height:81px;
width:inherit;
overflow:hidden;
text-align:center;
background:#FFFFFF url(../PNGfiles/compass.png) center no-repeat;
}

#nav{
height:15px;
text-align:center;
width:inherit;
border-bottom:#039 solid;
border-bottom-width:9px;
}

#main{
position:relative;
display:block;
top:5px;
left:0;
width:753px;
padding:0;
text-align: left;
}

#right_column{
float:right;
width:500px;
height:300px;
padding:10px;
background:#FFFFFF;
}


#left_column{
display:block;
float:left;
width:250px;
height:300px;
padding:10px;
font-size:14px;
text-align:center;
background:#FFFFFF;
}

#footer_home{
position:absolute;
bottom:-3px;
width:100%;
height:50px;
padding-top:10px;
border-top:#ADADAD 1px dashed;
text-align:center;
padding:5px;
font-size:8pt;
background:#FFFFFF;
left: -10px;
}

#footer{
bottom:-3px;
width:inherit;
height:50px;
padding-top:10px;
border-top:#ADADAD 1px dashed;
text-align:center;
padding:5px;
font-size:8pt;
background:#FFFFFF;
left: -10px;
}

#nav a{
margin:0px 30px 30px 0px;
color:#3A3F45;
}

#nav a:hover{
text-decoration:underline;
color:#CCC;
background:#039;
cursorointer;
}

#main table{
width:inherit;
height:inherit;
font-size:14px;
}


/*------------------------------*/
/* CONTENT STYLES */
/*------------------------------*/


.description{
display:block;
text-align:left;
width:95%;
padding:3px 0px 10px 5px;
font-size:12px;
background-color:white;
font-family: Arial, Helvetica, sans-serif;
font-style: normal;
}

.description2{
margin-bottom:2em;
font-size:10px;
color:#898989;
width:300px;
border:#9CA5AE;
text-align:center;
position:relative;
top:-13;
left:10px;
background-color:#E4EAF1;
padding:3px;
}

.staff{
border:0px;
margin:0px;
width:inherit;
}

.lists ul li{
margin:0px 0px 0px 10px;
padding:5;
list-style-type:none;
list-style-positionutside;
margin-bottom: 1px !important;
}

#main p {
text-align: left;
}

.imgborder{
border:thick #E6EDF4 solid;
border-width:15px;
}

.button-blue {
width:160px;
border-top: 1px solid #ffffff;
background: #65a9d7;
background: -webkit-gradient(linear, left top, left bottom, from(#aadffa), to(#65a9d7));
background: -webkit-linear-gradient(top, #aadffa, #65a9d7);
background: -moz-linear-gradient(top, #aadffa, #65a9d7);
background: -ms-linear-gradient(top, #aadffa, #65a9d7);
background: -o-linear-gradient(top, #aadffa, #65a9d7);
padding: 5px 10px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
font-size: 14px;
font-family: Georgia, serif;
text-decoration: none;
vertical-align: middle;
}
.button-blue:hover {
border-top-color: #28597a;
background: #28597a;
color: #cccccc;
}
.button-blue:active {
border-top-color: #1b435e;
background: #1b435e;
}

.button-red {
width:160px;
border-top: 1px solid #f7979f;
background: #d665bc;
background: -webkit-gradient(linear, left top, left bottom, from(#f8b2b3), to(#d665bc));
background: -webkit-linear-gradient(top, #f8b2b3, #d665bc);
background: -moz-linear-gradient(top, #f8b2b3, #d665bc);
background: -ms-linear-gradient(top, #f8b2b3, #d665bc);
background: -o-linear-gradient(top, #f8b2b3, #d665bc);
padding: 5px 10px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: #ffffff;
font-size: 14px;
font-family: Georgia, serif;
text-decoration: none;
vertical-align: middle;
}
.button-red:hover {
border-top-color: #782828;
background: #782828;
color: #ccc;
}
.button-red:active {
border-top-color: #5c1b23;
background: #5c1b23;
}

You can see the active pages at

http://www.mediqwest.com.

Also you'll notice the CSS for the buttons should make the button text white, but is being over ridden by the browser defaults. The CSS with the #nav is working correctly. This is my next issue to work out. Anything you can point to make me a better coder would be awesome!

Thanks Vacunita.

 

[spamjim]

The first thing you should always do is to validate...

http://validator.w3.org/check?verbose=1&uri=http://www.mediqwest.com/

Your markup is sending IE into quirks mode and things go wonky. Correct the issues shown in the validator and you should see some success.

 

[Evil8]

Thanks spamjim. I fixed all the HTML error found on all my pages using that validator. That is a good tool and I'll continue to use this in the future, for sure.

I still have the same issues I remarked on above with positioning and link characteristics.

Thanks!!

 

[Evil8]

Okay I also ran my css page through a validater and fixed two errors, but that still didn't solve my issues. I'm still working on this today. Could the issues with the css buttons be because of "unknown vendor extention"? They should have white text, but it doesn't matter which browser I'm using they have browser default color for both active and visited. I want them white all the time, but keep links placed in paragraphs to use the defaults.

Thanks.

 

[Evil8]

Fixed the posistioning issue. All I had to do was change the margin from 0 to 50px. Looks better now. Still working on the buttons, but because IE doesn't do this well I may be looking for an alternate solution.

 

[vacunita]

I don't see any CSS that applies to the Red button links. So it defaults to the browser defaults.

Links have to be specifically set, so you may want to add a couple of link specific classes:

.button-red a:link
{
}
.button-red a:visited
{
}
.button-red a:hover
{
}
.button-red a:active
{
}

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[Evil8]

Vacunita, that was the fix!

 

[spamjim]

I'm not understanding the intent of your page design. Do you want it left or center aligned?

It is left aligned in IE and center aligned everywhere else.

 

[Evil8]

I want it to look the same in all browsers to the best that each browser can render the CSS.

 

[spamjim]

I'm sorry. I must have been looking at a cached page (or maybe you are working on it now).

It is centered in IE but the 50px margin is not needed. The page is currently centered, plus 50 px to the right.

 

[Evil8]

It doesn't center in Internet Explorer version 9 on my laptop nor on my desktop with version 7.

Since I changed -

html, body {
margin:0;
padding:0;
}

To -

html, body {
margin:50px;
padding:0;
}

It has moved from the extreme left side to the plus 50 I changed it to. I understand that this also made the other browsers center plus 50 as well.

Thanks for your help. I do appreciate it.

 

[spamjim]

While in IE, press the F12 key to bring up the developer tools. The dev tools will let you toggle between browser and document modes. You will notice that your page loads in quirks mode.

To fix this, see

https://en.wikipedia.org/wiki/Quirks_mode

You need to include the system identifier.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]

 

[Evil8]

NICE!!! Excellent. It worked on the file copy, so I'll go and fix all the pages and put them on the server. I had never heard of Quirk Mode before, so I'm happy to learn something new.

Thank again!