Morgan
asked on
Why the same css element used in two different sections renders differently
Hello. I have a css element "promo-info" (it is declared as a class). I use it twice on one page, as seen in the code snippet below (labeled ***HTML****), but the output puts the promo-info element (contained within the left-top element) further to the right than its counter part contained within the left-bottom element (see screenshot to see what i'm talking about).
I've also supplied the css code for this section as well.
I was hoping someone would be able to tell me why this is.
Thanks,
neo
I've also supplied the css code for this section as well.
I was hoping someone would be able to tell me why this is.
Thanks,
neo
***************
**** HTML *****
***************
<div id="promo-section">
<div id="promo-left">
<div id="left-top">
<a href="#"><img class="promo-img" src="images/homepage/promo1.jpg" /></a>
<div class="promo-info">
<h3>New Fall Styles</h3>
<p>Kick your style up a notch. Check out he new fall collection.</p>
<h4>Shop <a href="#">Men's New Arrivals</a></h4>
<h4>Shop <a href="#">Women's New Arrivals</a></h4>
</div>
</div>
<div id="left-bottom">
<a href="#"><img class="promo-img" src="images/homepage/promo2.jpg" /></a>
<div class="promo-info">
<h3>Teva House</h3>
<p>Lifetime. Meet your Trip. Enter to win trip for two to the Teva House in Fiji.</p>
<h4>Visit <a href="#">the official teva House site</a></h4>
</div>
</div>
</div>
*******************
****** CSS ********
*******************
/**** PROMO *****/
#promo-section {
background:url(../images/homepage/bg-promo.jpg) no-repeat 0 0;
min-height:294px;
padding:24px 0 10px 20px;;
}
#promo-left {
float:left;
}
#left-top {
margin-bottom:30px;
min-height:120px;
}
#left-bottom {
min-height:120px;
}
#promo-right {
float: right;
width: 332px;
}
.promo-img {
float:left;
margin-right:10px;
}
.promo-img:hover {
opacity:.4;
filter:alpha(opacity=40);
}
.promo-info {
float:right;
max-width: 300px;
}
.promo-info h3 {
margin:0 0 2px 3px;
color:#00add9;
font-weight:bold;
font-size:13pt;
}
.promo-info h4 {
margin:0 0 2px 3px;
color:#ffffff;
font-weight:bold;
font-size:10pt;
}
.promo-info h4 a {
color:#00add9;
text-decoration:none;
}
.promo-info h4 a:hover {
color:#00add9;
text-decoration:underline;
}
.promo-info p {
font-size:8pt;
margin:0 0 2px 3px;
}
issue.jpg
ASKER
Thanks for the reply. I was thinking the same thing, but I could not figure out what parent is effecting it. Using firebug did not reveal any issue I could find.
Below is the complete css file.
thanks,
neo
Below is the complete css file.
thanks,
neo
@charset "utf-8";
/*******************************************************************************************************************
* The following is the main layout for all pages
*******************************************************************************************************************/
body {
background:url(../images/bg/newBG1.jpg) no-repeat scroll 50% 0 #ffffff;
font-family:Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
color:#999999;
}
.wrapper {
margin:0 auto;
width:969px;
text-align:left;
overflow:hidden;
}
ol, ul {
list-style:none outside none;
margin:0;
}
.clear {
clear:both;
margin:0;
padding:0;
}
#layout-top { /* EMPTY - here only for completness */
}
#layout-middle { /* EMPTY - here only for completness */
}
#layout-bottom {
background:url(../images/layout/bg-footer.png) no-repeat scroll 50% 0 transparent;
min-height:150px;
margin:0;
}
img {
border: none;
}
/*********************************************
**********************************************
* Header
**********************************************
*********************************************/
#layout-top .wrapper {
position:relative;
}
#header {
background:url(../images/logo/bg-header.jpg) no-repeat scroll 0 0;
height:80px;
}
/**** LOGO *****/
#logo {
display:block;
height:35px;
width:139px;
position:absolute;
left:10px;
top:10px;
}
#logo h1 {
position:absolute;
right:-99999em;
}
/**** SEARCH BAR ******/
#search-bar {
position:absolute;
top:8px;
left:767px;
}
#search-form {
background:url(../images/layout/bg-search.jpg) no-repeat scroll 0 0;
height:21px;
width:165px;
}
#search-form #search-button {
background:url(../images/layout/btn-search.jpg) no-repeat scroll 0 0;
border:medium none;
cursor:pointer;
height:21px;
width:30px;
margin-left:165px;
}
#search-form #search-field {
background:none repeat scroll 0 0 transparent;
outline:none;
border:0 none;
color:#8e8e8e;
font-size:12px;
margin-left:42px;
padding:2px;
width:118px;
position:absolute;
top:0;
left:0; /*for IE browser */
}
/**** NAV BAR ****/
#nav {
background:url(../images/nav/bg-nav.jpg) no-repeat scroll 0 0;
min-height:31px;
width:970px;
position:absolute;
top:49px;
}
.nav-bar {
font-weight:bold;
font-size:11pt;
text-transform:uppercase;
text-align:left;
line-height:28px;
}
.nav-cell {
float:left;
}
.nav-cell:hover {
background:url(../images/nav/light-blue-hover.jpg) no-repeat scroll 0 0;
}
.nav ol, ul {
padding-left:0;
}
.nav-cell a {
color:#ffffff;
text-decoration:none;
}
.nav-first { /* padding for first cell in list */
padding:0 20px 0 10px;
}
.nav-divider {
border-left:1px solid #1f1f1f;
display:block;
padding:0 20px;
}
/*********************************************
**********************************************
* MIDDLE / CONTENT AREA
**********************************************
*********************************************/
#img-slider {
min-height:400px;
background-color:#172b37;
}
/**** PROMO *****/
#promo-section {
background:url(../images/homepage/bg-promo.jpg) no-repeat 0 0;
min-height:294px;
padding:24px 0 10px 20px;;
}
#promo-left {
float:left;
}
#left-top {
margin-bottom:30px;
min-height:120px;
}
#left-bottom {
min-height:120px;
}
#promo-right {
float: right;
width: 332px;
}
.promo-img {
float:left;
margin-right:10px;
}
.promo-img:hover {
opacity:.4;
filter:alpha(opacity=40);
}
.promo-info {
float:right;
max-width: 300px;
}
.promo-info h3 {
margin:0 0 2px 3px;
color:#00add9;
font-weight:bold;
font-size:13pt;
}
.promo-info h4 {
margin:0 0 2px 3px;
color:#ffffff;
font-weight:bold;
font-size:10pt;
}
.promo-info h4 a {
color:#00add9;
text-decoration:none;
}
.promo-info h4 a:hover {
color:#00add9;
text-decoration:underline;
}
.promo-info p {
font-size:8pt;
margin:0 0 2px 3px;
}
These are the three classes involved. ".promo-info h4 a" changes the color of the links. It's doing what you're telling it to.
.promo-info h3 {
margin:0 0 2px 3px;
color:#00add9;
font-weight:bold;
font-size:13pt;
}
.promo-info h4 {
margin:0 0 2px 3px;
color:#ffffff;
font-weight:bold;
font-size:10pt;
}
.promo-info h4 a {
color:#00add9;
text-decoration:none;
}
ASKER
Davebaldwin:
Errr, you may need to re-read my issue. The color is not the problem.
Thanks,
Neo
Errr, you may need to re-read my issue. The color is not the problem.
Thanks,
Neo
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Davebaldwin:
Thanks for the reply. So what's your recommendation on fixing it? Change the fixed width with in promo-info. What do you mean kick my style?
Thanks for the reply. So what's your recommendation on fixing it? Change the fixed width with in promo-info. What do you mean kick my style?
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
That did the trick. Thanks!
You're welcome. Thanks for the points.
pleases share the css for this