No replies
killswitch666
killswitch666's picture
Offline
newbie
Last seen: 7 years 42 weeks ago
Timezone: GMT+3
Joined: 2013-04-04
Posts: 1
Points: 2

Hello Guys,

i came upon an issue with the margin top feature when previewing site in firefox.
To understand better what i need, i uploaded a screenshot with the preview in chorme (also works in IE) and firefox.

here's a part of the CSS:

.leftContent {
float:left;
margin-top:-100px;
width:210px;
background:url(images_main/marginContent.png) repeat-y left top;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
}
 
 
.leftContent2 {
float:left;
position:absolute;
margin-top:700px;
width:210px;
background:url(images_main/fullContent.png) repeat-y left top;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
}
 
.rightContent {
margin-top:-131%;
float:right;
width:210px;
background:url(images_main/marginContent.png) repeat-y left top;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
} 
 
.rightContent2 {
margin-top:-80%;
float:right;
width:210px;
background:url(images_main/fullContent.png) repeat-y left top;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
} 
 
.fullContent {
float:center;
position:inherit;
margin-top: -100px;
margin-left:220px;
width:500px;
background:url(images_main/fullContent.png) repeat;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
}

and here's a part of the HTML:

<div class="rightContent">
<p>
<table border='1' width='100%'>
 
<td align="center">test right
est right
<br>
est right
<br>
est right
<br>
est right
<br>
est right
<br>
est right
<br>
est right
<br>
test right<br>
test right<br>
test right<br>
test right<br>
test right<br>
test right<br>
test right<br>
test right<br>
<a href="http://www.facebook.com" target="_blank" 
   onMouseover="fac.src='images_main/facebook1.png'" 
   onMouseout="fac.src='images_main/facebook.png'">
<img src="images_main/facebook.png" name="fac" border="0" alt="blog" title="facebook"></img>
</a>
 
<a href="https://plus.google.com/" target="_blank" 
   onMouseover="gpl.src='images_main/gplus1.png'" 
   onMouseout="gpl.src='images_main/gplus.png'">
<img src="images_main/gplus.png" name="gpl" border="0" alt="blog" title="google+"></img>
</a>
 
</td>
</tr>
</table>
</p>
</div>
 
<div class="rightContent2">
<p>
<table border='0' width='100%'>
<tr>
<td align="center">test right rightContent2
<br>
test right rightContent2
<br>
test right rightContent2
<br>
test right rightContent2
<br>
test right rightContent2
<br>
 
</td>
</tr>
</table>
</p>
</div>

So the issue would be the margin-top setting isn't working with firefox same as chrome/ie.
I tried changing margin-top values in "rightContent" to fix in firefox but then it alters in chrome/ie.
I also tried changing positions (absolute, inhrit..) of "rightContent".

Maybe you guys can help me out. Thank you.

AttachmentSize
screen.jpg243.85 KB