18 replies [Last post]
sandyhon
sandyhon's picture
Offline
Regular
Cool, CA
Last seen: 8 years 28 weeks ago
Cool, CA
Timezone: GMT-7
Joined: 2007-09-04
Posts: 45
Points: 41

Doc type: in place
Validation: no errors

The page works beautifully in FF, Safari, Netscape and Opera.

The sidebar text should be 22px from the left. In IE7 it displays around 50+px. Also, the hover link offsets to the right. I have no idea how it performs in other versions of IE, I only have access to IE7.
Any recommendations?

Here's a link to a page in the actual site: http://home.jps.net/~sandyhon/quilt_show/quilt_show.html
Thanks in advance for your help!
Sandy

P.S. I hope I did the image source links correctly...not sure.

Foothill Quilters Guild

body {
margin: 0px auto;
padding: 0px;
color: #333333;
background-color: #666;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: x-small;
}

#wrapper {
margin: 0 auto;
padding: 0px;
position: relative;
width: 760px;
color: #333;
text-align: left;
background-image: url(http://home.jps.net/~sandyhon/images/bkgd-repeat.jpg);
background-repeat: repeat-y;
background-color: #FFFFFF;
}

/* start topnav styles */
#topnav {
margin: 0px;
padding: 0;
display: block;
background-color: #3d261e;
}

#topnav ul {
margin: 0px;
padding: 0px;
list-style: none;
text-align: center;
}

#topnav li {
padding-left: 18px;
display: inline;
background-color: #3d261e;
font-weight: bold;
}

#topnav a:link, #topnav a:visited {
color: #f7a150;
text-decoration: none;
}

#topnav a:hover {
color: #FFFFFF;
}
/* end topnav styles */

#sub-header {
margin: 0px;
padding: 0px;
clear: both;
}

#container {
margin: 0px;
padding: 0px;
width: 760px;
}

#content {
width: 560px;
margin: 0px 0px 0px 165px;
padding: 0px;
}

/* start sidebar navigation styles */
#sidebar {
width: 86px;
margin: 0px;
float: left;
}

#sidebar ul {
margin: 0 auto;
list-style: none;
}

#sidebar a:link, #sidebar a:visited {
width: 86px;
padding: 8px 22px 8px 22px;
text-decoration: none;
font-weight: bold;
color: #1f4d5f;
display: block;
}

#sidebar a:hover {
color: #ffffff;
background-image: url(http://home.jps.net/~sandyhon/images/rollover.jpg);
background-repeat: repeat-x;
}
/* end sidebar navigation styles */

p {
font: x-small Verdana, Arial, Helvetica, sans-serif;
line-height: 1.5;
text-align: left;
color: #333333;
}

h1 {
color: #66528a;
text-align: left;
margin-bottom: 0px;
padding: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: medium;
font-style: normal;
line-height: normal;
font-weight: bold;
}

ul {
text-decoration: none;
margin: 0px;
padding: 0px;
list-style-type: square;
color: #39616d;
list-style-position: inside;
}

.footer {
clear: both;
color: #333333;
text-align: center;
padding: 30px 0px 5px 0px;
}








subhead





heading

content goes here






mihirc
mihirc's picture
Offline
Leader
Pune, Maharashtra, India
Last seen: 6 years 17 weeks ago
Pune, Maharashtra, India
Timezone: GMT+5.5
Joined: 2007-05-09
Posts: 728
Points: 204

hI, i tried removing the

hI,
i tried removing the padding-left:22px and it looks as it is looking in FF.. thats what you want right?

mihir Smile

Proprietor - Thoughtfulviewfinder Services
Web Development | Design | Merchandise | Photography
My personal blog: MihirChhatre.com

sandyhon
sandyhon's picture
Offline
Regular
Cool, CA
Last seen: 8 years 28 weeks ago
Cool, CA
Timezone: GMT-7
Joined: 2007-09-04
Posts: 45
Points: 41

When I removed the padding

When I removed the padding the text appeared in the correct position in IE7, but it did not correct the hover link. The hover no longer offsets, but does not fill the entire width of the bar. It also messed up how the navigation worked in FF, Safari, Netscape and Opera. Is it possible to have a separate CSS style sheet for IE? I really don't understand how to make it work in all browsers.

sandyhon
sandyhon's picture
Offline
Regular
Cool, CA
Last seen: 8 years 28 weeks ago
Cool, CA
Timezone: GMT-7
Joined: 2007-09-04
Posts: 45
Points: 41

Should I be using "Conditional Comments" for IE browsers?

I still don't understand how to make things work across all browser platforms. Please help!

mihirc
mihirc's picture
Offline
Leader
Pune, Maharashtra, India
Last seen: 6 years 17 weeks ago
Pune, Maharashtra, India
Timezone: GMT+5.5
Joined: 2007-05-09
Posts: 728
Points: 204

Hello, yes you can ofcourse

Hello,

yes you can ofcourse use conditional comments for IE. i prefer to use them most of the times cause they are very easy to manage, and dont break the layout anywhere else.

mihir Smile

Proprietor - Thoughtfulviewfinder Services
Web Development | Design | Merchandise | Photography
My personal blog: MihirChhatre.com

sandyhon
sandyhon's picture
Offline
Regular
Cool, CA
Last seen: 8 years 28 weeks ago
Cool, CA
Timezone: GMT-7
Joined: 2007-09-04
Posts: 45
Points: 41

Does "conditional comments" + validation = no errors?

Thank you mihirc, thank you. I will read up more on conditional comments. Do you know if: "conditional comments" + validation = no errors?
Thanks again for your help.

mihirc
mihirc's picture
Offline
Leader
Pune, Maharashtra, India
Last seen: 6 years 17 weeks ago
Pune, Maharashtra, India
Timezone: GMT+5.5
Joined: 2007-05-09
Posts: 728
Points: 204

Put your stylesheet here.

Put your stylesheet here.

What this means is, that only IE6 will read this part of the code(put it in ur head tag).

And there will be no problem with the validation cause, this is just plain HTML with commented material.

mihir Smile

Proprietor - Thoughtfulviewfinder Services
Web Development | Design | Merchandise | Photography
My personal blog: MihirChhatre.com

sandyhon
sandyhon's picture
Offline
Regular
Cool, CA
Last seen: 8 years 28 weeks ago
Cool, CA
Timezone: GMT-7
Joined: 2007-09-04
Posts: 45
Points: 41

Conditional comments go where and contain what exactly?

I just got finished reading "About Conditional Comments"
http://msdn2.microsoft.com/en-us/library/ms537512.aspx

I'm still confused. :?

Do the conditinal comments go in the CSS style sheets or in the head of the page?

In the conditional comments I changed the width and padding to fit the way IE renders visible content and I don't see any changes. Problem of offset text (in link view) and offset text and hover link (in hover view) still exist.

Any recommendations?

Foothill Quilters Guild

#sidebar a:link, #sidebar a:visited {
width: 108px;
padding: 8px 22px 8px 22;

body {
margin: 0px auto;
padding: 0px;
color: #333333;
background-color: #666;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: x-small;
}

#wrapper {
margin: 0 auto;
padding: 0px;
position: relative;
width: 760px;
color: #333;
text-align: left;
background-image: url(http://home.jps.net/~sandyhon/images/bkgd-repeat.jpg);
background-repeat: repeat-y;
background-color: #FFFFFF;
}

/* start topnav styles */
#topnav {
margin: 0px;
padding: 0;
display: block;
background-color: #3d261e;
}

#topnav ul {
margin: 0px;
padding: 0px;
list-style: none;
text-align: center;
}

#topnav li {
padding-left: 18px;
display: inline;
background-color: #3d261e;
font-weight: bold;
}

#topnav a:link, #topnav a:visited {
color: #f7a150;
text-decoration: none;
}

#topnav a:hover {
color: #FFFFFF;
}
/* end topnav styles */

#sub-header {
margin: 0px;
padding: 0px;
clear: both;
}

#container {
margin: 0px;
padding: 0px;
width: 760px;
}

#content {
width: 560px;
margin: 0px 0px 0px 165px;
padding: 0px;
}

/* start sidebar navigation styles */
#sidebar {
width: 86px;
margin: 0px;
float: left;
}

#sidebar ul {
margin: 0 auto;
list-style: none;
}

#sidebar a:link, #sidebar a:visited {
width: 86px;
padding: 8px 22px 8px 22px;
text-decoration: none;
font-weight: bold;
color: #1f4d5f;
display: block;
}

#sidebar a:hover {
color: #ffffff;
background-image: url(http://home.jps.net/~sandyhon/images/rollover.jpg);
background-repeat: repeat-x;
}
/* end sidebar navigation styles */

p {
font: x-small Verdana, Arial, Helvetica, sans-serif;
line-height: 1.5;
text-align: left;
color: #333333;
}

h1 {
color: #66528a;
text-align: left;
margin-bottom: 0px;
padding: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: medium;
font-style: normal;
line-height: normal;
font-weight: bold;
}

ul {
text-decoration: none;
margin: 0px;
padding: 0px;
list-style-type: square;
color: #39616d;
list-style-position: inside;
}

.footer {
clear: both;
color: #333333;
text-align: center;
padding: 30px 0px 5px 0px;
}








subhead





heading

content goes here






mihirc
mihirc's picture
Offline
Leader
Pune, Maharashtra, India
Last seen: 6 years 17 weeks ago
Pune, Maharashtra, India
Timezone: GMT+5.5
Joined: 2007-05-09
Posts: 728
Points: 204

hi, just checking your

hi,

just checking your style added in the conditional comment. You havent closed it .

And you have done the right thing, but to avoid styling in the same document, you could directly add a normal stylesheet to it.

I think if you close the style , it'll start working.

mihir Smile

Proprietor - Thoughtfulviewfinder Services
Web Development | Design | Merchandise | Photography
My personal blog: MihirChhatre.com

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 3 years 20 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

have you tried. #sidebar ul

have you tried.

#sidebar ul li {
padding: 0;
margin: 0;
}

all ยป http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

sandyhon
sandyhon's picture
Offline
Regular
Cool, CA
Last seen: 8 years 28 weeks ago
Cool, CA
Timezone: GMT-7
Joined: 2007-09-04
Posts: 45
Points: 41

Closing style didn't do anything.

Hi Mihir,
Closing the style tag had no results. Sad
Not sure where to go from here.
Sandy

Below is the latest code:

Foothill Quilters Guild

#sidebar a:link, #sidebar a:visited {
width: 108px;
padding: 8px 22px 8px 0px;
}

body {
margin: 0px auto;
padding: 0px;
color: #333333;
background-color: #666;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: x-small;
}

#wrapper {
margin: 0 auto;
padding: 0px;
position: relative;
width: 760px;
color: #333;
text-align: left;
background-image: url(http://home.jps.net/~sandyhon/images/bkgd-repeat.jpg);
background-repeat: repeat-y;
background-color: #FFFFFF;
}

/* start topnav styles */
#topnav {
margin: 0px;
padding: 0;
display: block;
background-color: #3d261e;
}

#topnav ul {
margin: 0px;
padding: 0px;
list-style: none;
text-align: center;
}

#topnav li {
padding-left: 18px;
display: inline;
background-color: #3d261e;
font-weight: bold;
}

#topnav a:link, #topnav a:visited {
color: #f7a150;
text-decoration: none;
}

#topnav a:hover {
color: #FFFFFF;
}
/* end topnav styles */

#sub-header {
margin: 0px;
padding: 0px;
clear: both;
}

#container {
margin: 0px;
padding: 0px;
width: 760px;
}

#content {
width: 560px;
margin: 0px 0px 0px 165px;
padding: 0px;
}

/* start sidebar navigation styles */
#sidebar {
width: 86px;
margin: 0px;
float: left;
}

#sidebar ul {
margin: 0 auto;
list-style: none;
}

#sidebar a:link, #sidebar a:visited {
width: 86px;
padding: 8px 22px 8px 22px;
text-decoration: none;
font-weight: bold;
color: #1f4d5f;
display: block;
}

#sidebar a:hover {
color: #ffffff;
background-image: url(http://home.jps.net/~sandyhon/images/rollover.jpg);
background-repeat: repeat-x;
}
/* end sidebar navigation styles */

p {
font: x-small Verdana, Arial, Helvetica, sans-serif;
line-height: 1.5;
text-align: left;
color: #333333;
}

h1 {
color: #66528a;
text-align: left;
margin-bottom: 0px;
padding: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: medium;
font-style: normal;
line-height: normal;
font-weight: bold;
}

ul {
text-decoration: none;
margin: 0px;
padding: 0px;
list-style-type: square;
color: #39616d;
list-style-position: inside;
}

.footer {
clear: both;
color: #333333;
text-align: center;
padding: 30px 0px 5px 0px;
}








subhead





heading

content goes here






sandyhon
sandyhon's picture
Offline
Regular
Cool, CA
Last seen: 8 years 28 weeks ago
Cool, CA
Timezone: GMT-7
Joined: 2007-09-04
Posts: 45
Points: 41

Setting padding and margin to 0 wrecks layout in FF, Safari, Net

Setting the padding and margin to 0 wrecks layout in FF, Safari, Netscape and Opera. The site works fine in all browsers except IE. I'm trying to work with conditional comments to correct IE issues, but have yet to succeed.
Any other ideas or directions?

mihirc
mihirc's picture
Offline
Leader
Pune, Maharashtra, India
Last seen: 6 years 17 weeks ago
Pune, Maharashtra, India
Timezone: GMT+5.5
Joined: 2007-05-09
Posts: 728
Points: 204

can u put it up

can u put it up somewhere?

so that i can directly try it online?

mihir Smile

Proprietor - Thoughtfulviewfinder Services
Web Development | Design | Merchandise | Photography
My personal blog: MihirChhatre.com

sandyhon
sandyhon's picture
Offline
Regular
Cool, CA
Last seen: 8 years 28 weeks ago
Cool, CA
Timezone: GMT-7
Joined: 2007-09-04
Posts: 45
Points: 41

Try this link:

Hi Mihir!
Here's the link: http://home.jps.net/~sandyhon/test.html :rolleyes:
Sandy

mihirc
mihirc's picture
Offline
Leader
Pune, Maharashtra, India
Last seen: 6 years 17 weeks ago
Pune, Maharashtra, India
Timezone: GMT+5.5
Joined: 2007-05-09
Posts: 728
Points: 204

Solved it!!!

Solved it!!! :thumbsup:

What i tried was adding a float to it. And then its done.
div#sidebar ul li{
float:left;
}

mihir Smile

Proprietor - Thoughtfulviewfinder Services
Web Development | Design | Merchandise | Photography
My personal blog: MihirChhatre.com

sandyhon
sandyhon's picture
Offline
Regular
Cool, CA
Last seen: 8 years 28 weeks ago
Cool, CA
Timezone: GMT-7
Joined: 2007-09-04
Posts: 45
Points: 41

Did you add the float to the

Did you add the float to the regular css or to the conditional comments? I already had the #sidebar set to float. Doesn't the #sidebar ul li inherit the float from the #sidebar?
Sandy

mihirc
mihirc's picture
Offline
Leader
Pune, Maharashtra, India
Last seen: 6 years 17 weeks ago
Pune, Maharashtra, India
Timezone: GMT+5.5
Joined: 2007-05-09
Posts: 728
Points: 204

Hi, i tried it with the

Hi,

i tried it with the developer toolbar, and then tried it with firebug, so i dont think there is any problem if you directly to your main css.

also, i dont think it is inheriting the style from the sidebar, cause it is only a containing element.

mihir Smile

Proprietor - Thoughtfulviewfinder Services
Web Development | Design | Merchandise | Photography
My personal blog: MihirChhatre.com

sandyhon
sandyhon's picture
Offline
Regular
Cool, CA
Last seen: 8 years 28 weeks ago
Cool, CA
Timezone: GMT-7
Joined: 2007-09-04
Posts: 45
Points: 41

I added it to the css and it

I added it to the css and it works!!!

I guess I no longer need the conditional comments. Now tell me, what is this developer toolbar and firebug?

Thanks again for all your help!!! :thumbsup:
Sandy

mihirc
mihirc's picture
Offline
Leader
Pune, Maharashtra, India
Last seen: 6 years 17 weeks ago
Pune, Maharashtra, India
Timezone: GMT+5.5
Joined: 2007-05-09
Posts: 728
Points: 204

Hi,

Hi,

IE6 & IE7 have a developer toolbar, where you can directly add styles and check wether they are applying or not in IE's. it is called as the IE developer toolbar. its a free download and a good addition to make solving IE problems easier.

Firebug is based on the same lines for Mozilla FF, though it has tons of features more. You can see the see javascripts, html, DOM , everything that a developer needs to see in a single application. Amazing addition. Must have for any developer.

Also see to it that you download the very old , first version of the IE dev toolbar, as it is free and the best, the later ones are paid, and dont offer much different, except that they are very complex.

mihir Smile

Proprietor - Thoughtfulviewfinder Services
Web Development | Design | Merchandise | Photography
My personal blog: MihirChhatre.com