[css-d] IE7 css issue
Hi, I am working on a website, and while this works on some browsers, IE7 doesn't quite work. The website is: www.centralcaribooarts.com and the stylesheet being used is http://www.centralcaribooarts.com/css/base.css In Firefox and safari, it works well, but in IE7, the wrapper is being overlapped over the header. It has been a long while since I last developed a website, so my memory is foggy. I think it has to do with margins and floats, but I'm hoping someone here would be able to help pinpoint the issue and give suggestions on how to fix it. the CSS and the HTML has been validated. Laurie Landry creat...@cartierbaileystudio.com Cartier Bailey Creative Studio Box 105 Wells, BC V0K 2R0 __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE7 css issue
Hi, I am working on a website, and while this works on some browsers, IE7 doesn't quite work. The website is: www.centralcaribooarts.com and the stylesheet being used is http://www.centralcaribooarts.com/css/base.css In Firefox and safari, it works well, but in IE7, the wrapper is being overlapped over the header. It has been a long while since I last developed a website, so my memory is foggy. I think it has to do with margins and floats, but I'm hoping someone here would be able to help pinpoint the issue and give suggestions on how to fix it. the CSS and the HTML has been validated. Laurie Landry creat...@cartierbaileystudio.com Cartier Bailey Creative Studio Box 105 Wells, BC V0K 2R0 Laurie Landry creat...@cartierbaileystudio.com Cartier Bailey Creative Studio Box 105 Wells, BC V0K 2R0 __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Navigation positioning awry?
For this page: http://laurielandry.com/homepage.html and using the subsequent CSS http://laurielandry.com/assets/templates/laurielandry/css/primary_test.css , I'm trying to figure out why the UL is shift over. In some browsers, the links are centered with the white box as desired, but in Firefox 2.0 (PC) the navigation links is shifted over in the correct positioning with the UL area. I want the UL (outlined in red) to be centered with the white box, not shifted over so much. I'm really stumped on why this is happening, and how to correct it. Thanks in advance, Laurie __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] DIV vertical expansion help
Hi,
I am currently working on my website:
http://cartierbaileystudio.com/2010/layoutnew.html
In firefox and safari (on Mac), it works fine, but when I do this test
in Windows IE 7, what happens is that the text that is in the blue-
green box overflows over to the next div section (see
http://cartierbaileystudio.com/2010/IE7Screenshot.jpg)
. Ideally, the blue box should expand with the text, and the
subsequent div sections below it shifts down as needed. Any idea what
I need to do to make this work?
Thanks in advance!
The CSS file can be found here:
http://cartierbaileystudio.com/2010/css/style.css
or as below:
@charset UTF-8;
/* CSS Document */
#wrapper {
width: 900px;
margin-left: auto;
margin-right: auto;
padding: 5px;
margin-bottom: 15px;
border: 1px solid #60C1AB;
}
#logo {
text-align: left;
float: left;
height: 100px;
width: 313px;
}
#slogan {
font-family: Trebuchet MS, Helvetica, Arial, sans-serif;
font-size: x-large;
color: #00;
text-align: right;
float: right;
width: 500px;
margin-top: 70px;
font-weight: lighter;
}
.creativity {
font-weight: bolder;
color: #BA6B51;
}
#contentwrapper {
text-align: left;
width: 856px;
margin-right: auto;
margin-left: auto;
margin-top: 25px;
margin-bottom: 25px;
clear: both;
float: none;
}
.whitespace {
clear: both;
height: 10px;
width: 856px;
}
#navcontainer {
margin: 0px;
padding: 0px;
}
#navcontainer ul
{
text-align: right;
padding-bottom: 5px;
padding-top: 5px;
padding-left: 0;
background-color: #BA6B51;
color: white;
width: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
margin: 0;
}
#navcontainer ul li
{
display: inline;
padding-left: 0;
padding-right: 0;
padding-bottom: 5px;
/* matches link padding except for left and right */
padding-top: 5px;
}
#navcontainer ul li a
{
padding-left: 10px;
padding-right: 10px;
padding-bottom: 5px;
padding-top: 5px;
color: white;
text-decoration: none;
}
#navcontainer ul li a:hover
{
color: #60C1AB;
}
#navcontainer #active {
}
#sectionals {
margin: 0px;
padding: 0px;
clear: both;
}
#graphicdesign {
text-align: left;
width: 274px;
float: left;
}
#framing {
text-align: left;
width: 274px;
float: left;
}
#fineart {
text-align: left;
width: 274px;
float: left;
}
.sectioncontent {
font-family: Trebuchet MS, Georgia, serif;
font-size: small;
color: #FF;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 10px;
}
.verticalspace {
width: 17px;
height: 10px;
float: left;
}
#maincontent {
background-color: #60C1AB;
width: 856px;
clear: both;
height: 375px;
margin: 0px;
padding: 0px;
}
#image_main img {
float: left;
height: 312px;
width: 306px;
}
#content_main {
margin-right: 15px;
font-family: Trebuchet MS, Georgia, serif;
font-size: small;
margin-bottom: 0px;
width: 530px;
float: right;
}
p.main {
padding: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 0px;
}
h1.mainhead {
color: #FF;
padding: 0px;
margin-top: 15px;
margin-right: 0px;
margin-bottom: 5px;
margin-left: 0px;
font-weight: normal;
}
#updates {
width: 856px;
clear: both;
margin-bottom: 5px;
height: 150px;
}
#news {
padding: 0px;
width: 500px;
margin: 0px;
float: left;
}
.newsheadline {
font-family: Trebuchet MS, Georgia, serif;
font-size: xx-large;
font-style: normal;
font-weight: bold;
margin: 0px;
padding: 0px;
color: #5A3A00;
}
.newscontent {
font-family: Trebuchet MS, Georgia, serif;
font-size: small;
font-weight: normal;
margin: 0px;
padding: 0px;
}
#offers {
float: right;
width: 300px;
border: medium dashed #BA6B51;
height: 125px;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 15px;
}
.offerheadline {
font-family: Trebuchet MS, Georgia, serif;
font-size: x-large;
font-weight: bold;
color: #5A3A00;
margin: 0px;
padding: 0px;
}
.offercontent {
font-family: Trebuchet MS, Georgia, serif;
font-size: small;
margin: 0px;
padding:
[css-d] DIV vertical expansion help
Hi,
I am currently working on my website:
http://cartierbaileystudio.com/2010/layoutnew.html
In firefox and safari (on Mac), it works fine, but when I do this test
in Windows IE 7, what happens is that the text that is in the blue-
green box overflows over to the next div section (see
http://cartierbaileystudio.com/2010/IE7Screenshot.jpg)
.
Ideally, the blue box should expand with the text, and the subsequent
div sections below it shifts down as needed. Any idea what I need to
do to make this work?
Thanks in advance!
The CSS file can be found here:
http://cartierbaileystudio.com/2010/css/style.css
or as below:
@charset UTF-8;
/* CSS Document */
#wrapper {
width: 900px;
margin-left: auto;
margin-right: auto;
padding: 5px;
margin-bottom: 15px;
border: 1px solid #60C1AB;
}
#logo {
text-align: left;
float: left;
height: 100px;
width: 313px;
}
#slogan {
font-family: Trebuchet MS, Helvetica, Arial, sans-serif;
font-size: x-large;
color: #00;
text-align: right;
float: right;
width: 500px;
margin-top: 70px;
font-weight: lighter;
}
.creativity {
font-weight: bolder;
color: #BA6B51;
}
#contentwrapper {
text-align: left;
width: 856px;
margin-right: auto;
margin-left: auto;
margin-top: 25px;
margin-bottom: 25px;
clear: both;
float: none;
}
.whitespace {
clear: both;
height: 10px;
width: 856px;
}
#navcontainer {
margin: 0px;
padding: 0px;
}
#navcontainer ul
{
text-align: right;
padding-bottom: 5px;
padding-top: 5px;
padding-left: 0;
background-color: #BA6B51;
color: white;
width: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
margin: 0;
}
#navcontainer ul li
{
display: inline;
padding-left: 0;
padding-right: 0;
padding-bottom: 5px;
/* matches link padding except for left and right */
padding-top: 5px;
}
#navcontainer ul li a
{
padding-left: 10px;
padding-right: 10px;
padding-bottom: 5px;
padding-top: 5px;
color: white;
text-decoration: none;
}
#navcontainer ul li a:hover
{
color: #60C1AB;
}
#navcontainer #active {
}
#sectionals {
margin: 0px;
padding: 0px;
clear: both;
}
#graphicdesign {
text-align: left;
width: 274px;
float: left;
}
#framing {
text-align: left;
width: 274px;
float: left;
}
#fineart {
text-align: left;
width: 274px;
float: left;
}
.sectioncontent {
font-family: Trebuchet MS, Georgia, serif;
font-size: small;
color: #FF;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 10px;
}
.verticalspace {
width: 17px;
height: 10px;
float: left;
}
#maincontent {
background-color: #60C1AB;
width: 856px;
clear: both;
height: 375px;
margin: 0px;
padding: 0px;
}
#image_main img {
float: left;
height: 312px;
width: 306px;
}
#content_main {
margin-right: 15px;
font-family: Trebuchet MS, Georgia, serif;
font-size: small;
margin-bottom: 0px;
width: 530px;
float: right;
}
p.main {
padding: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 0px;
}
h1.mainhead {
color: #FF;
padding: 0px;
margin-top: 15px;
margin-right: 0px;
margin-bottom: 5px;
margin-left: 0px;
font-weight: normal;
}
#updates {
width: 856px;
clear: both;
margin-bottom: 5px;
height: 150px;
}
#news {
padding: 0px;
width: 500px;
margin: 0px;
float: left;
}
.newsheadline {
font-family: Trebuchet MS, Georgia, serif;
font-size: xx-large;
font-style: normal;
font-weight: bold;
margin: 0px;
padding: 0px;
color: #5A3A00;
}
.newscontent {
font-family: Trebuchet MS, Georgia, serif;
font-size: small;
font-weight: normal;
margin: 0px;
padding: 0px;
}
#offers {
float: right;
width: 300px;
border: medium dashed #BA6B51;
height: 125px;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 15px;
}
.offerheadline {
font-family: Trebuchet MS, Georgia, serif;
font-size: x-large;
font-weight: bold;
color: #5A3A00;
margin: 0px;
padding: 0px;
}
.offercontent {
font-family: Trebuchet MS, Georgia, serif;
font-size: small;
margin: 0px;
padding:
[css-d] where did I go wrong?
I was customizing this stylesheet, here: http://www.lmlweb.com/angela/wp-content/themes/random-image/style.css for this site: http://angela.lmlweb.com and while it works in Firefox, I tested this in IE, and it completely broke. I'm clueless as to where I could have gone wrong, and would appreciate a pair of fresh eyes to tell me what I could have done wrong. Thanks. -- Laurie Landry __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
