1. Home
  2. Forums Index
  3. Browser Side / CSS 4:14 pm May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

Alignment Problem for Opera 8

         

RKTexas

4:47 pm on Aug 20, 2010 (gmt 0)

10+ Year Member



I have a page that I am trying to fix for Opera 8. What it is doing is it is not lining up correctly I am attaching two screen shots as well as my HTML and CSS code. here is what it looks like in Firefox

[robkinkaid.com ]

This is what it looks like in Opera 8

[robkinkaid.com ]

the text and boxes do not line up
here is the CSS 
@charset "utf-8";

/* CSS Document */



*{padding: 0; margin: 0;}



body{

background-color: #c0c0c0;

margin: 0px;

}



a {

color: #282727;

font-family: Verdana, Geneva, sans-serif;

}



a:link{

color: #282727;

}



a:visited{

color: #282727;

}



a:active{

color: #282727;

}



a:hover{

color: #282727;

}



#container{

margin-left:auto;

margin-right:auto;

width: 800px;

background-color: #ffffff;

padding-bottom: 50px;

}



#header{

background-color: #eeeeee;

width: 800px;

height: 200px;

}



#name{

font-family: Arial, Helvetica, sans-serif;

font-size: 34px;

font-weight: bold;

color: #253f6f;

padding-top: 40px;

padding-bottom: 15px;

padding-left: 25px;

border-top-width: 5px;

border-right-width: 5px;

border-bottom-width: 5px;

border-left-width: 5px;

border-top-color: #3f65ab;

border-right-color: #3f65ab;

border-bottom-color: #3f65ab;

border-left-color: #3f65ab;

border-bottom-style: solid;

}



#logo{

text-align: right;

padding-top: 25px;

padding-right: 30px;

padding-bottom: 20px;

}



#border_top{

margin-top:30px;

margin-left:30px;

}



#main_body{

border: thin none #eeeeee;

margin-right: 30px;

margin-left: 30px;

}



#grey_box{

margin: 0px;

padding-right: 90px;

padding-left: 90px;

padding-bottom: 50px;

background-image: url(/img/verify_background.jpg);

background-repeat: repeat-y;

}



#navigation{

margin: 0px;

padding-top: 30px;

padding-bottom: 30px;

padding-right: 20px;

padding-left: 20px;

}



#eligible {

background-color: #FFF;

border: thin solid #ec0035;

padding-top: 15px;

padding-right: 30px;

padding-bottom: 15px;

padding-left: 30px;

}



#words {

font-family: Verdana, Geneva, sans-serif;

font-size: 11px;

font-weight: bold;

}



#verify_account {

font-family: Verdana, Geneva, sans-serif;

font-size: 14px;

color: #ec0035;

font-weight: bold;

margin-top: 30px;

margin-bottom: 15px;

}



h2 {

font-size:10px;

color:#ec0035;

font-family: Verdana, Geneva, sans-serif;

float:left;

padding-right:2px;

}



#number {

font-family: Verdana, Geneva, sans-serif;

font-size: 10px;

padding-bottom: 10px;

}



#footer {

font-family: Verdana, Geneva, sans-serif;

font-size: 10.5px;

color: #6b6b6b;

font-weight: normal;

text-align: center;

margin-top: 20px;

}



#footer a, #whatisbill2phone {

color: #6b6b6b;

text-decoration:none;

cursor:pointer;

cursor:hand;

}



#footer a:link{

color: #6b6b6b;

}



#footer a:visited{

color: #6b6b6b;

}



#footer a:active{

color: #6b6b6b;

}



#footer a:hover{

color: #6b6b6b;

text-decoration:underline;

}



#whatisb2p_dialog p {

padding-bottom:15px;

}



#whatisb2p_dialog ul {

padding-left: 20px;

padding-bottom: 15px;

}



.textbox{

width: 95px;

height: 25px;

margin-left: 20px;

}



.textbox2 {

width: 200px;

height: 25px;

margin-left: 28px;

}



.textbox3{

width: 95px;

height: 25px;

margin-left: 10px;

}



#email{

width: 200px;

height: 25px;

margin-left: 22px;

}



#left{

float: left;

padding-right:20px;

}



#right2{

float: right;

padding-right: 110px;

}



#address{

width: 200px;

height: 25px;

margin-left: 9px;

}



#state_select{

width:200px;

height:25px;

margin-left: 23px;

}



#last_four{

font-family: Verdana, Geneva, sans-serif;

font-size: 10px;

color: #151212;

padding-bottom: 5px;

}



#social_security{

text-align:right;

padding-bottom: 5px;

font-family: Verdana, Geneva, sans-serif;

font-size: 12px;

color: #6b6b6b;

}



#social_box{

height:25px;

width:75px;

}



#to_verify{

font-family: Verdana, Geneva, sans-serif;

font-size: 10.5px;

color: #6b6b6b;

}



#city{

width: 200px;

height: 25px;

margin-left: 22px;

}



#zip{

width: 200px;

height: 25px;

margin-left: 26px;

}



#links{

padding-top:20px;

margin-bottom: 75px;

}



#captcha{

margin-top:18px;

padding-right: 35px;

}



#whatsthis{

font-family: Verdana, Geneva, sans-serif;

font-size: 10px;

}



#whatsthis a{

color:#282727;

}



#yes{

float:left;

font-family: Verdana, Geneva, sans-serif;

font-size: 14px;

color: #ec0035;

font-weight: bold;

margin-right: 20px;

padding-top: 10px;

}



#verbage{

padding-bottom: 20px;

}



#yes_check{

margin-right:15px;

}



#disclaimer{

font-family: Verdana, Geneva, sans-serif;

font-size: 10px;

color: #333333;

padding-top: 10px;

}



#submit {

float: right;

margin-left: 15px;

}



#submit a{

border: 0;

}



#other {

font-weight: normal;

color: #282727;

font-family: Verdana, Geneva, sans-serif;

font-size: 10.5px;

text-align: right;

padding-top: 15px;

}



#other a{

text-decoration:underline;

color: #282727;

}



#bottom_border{

margin-bottom:30px;

margin-left:30px;

}


and the HTML 




function submitForm()

{

$('#mainform').submit();

}



var Recaptch

</script>

{/literal}

{/block}



{block "body"}



<div id="container">

<div id="header">

<div id="name">{$SiteName}</div>

<div id="logo"><img src="/img/gray_logo.jpg" width="224" height="50" /></div>

<!--End header --></div>



<div id="border_top"><img src="/img/verify_top_border.jpg" width="735" height="20" /></div>

<div id="main_body">

<div id="grey_box">

<div id="navigation"><img src="/img/steps2.jpg" width="497" height="51" /></div>

<div id="verify_account">Please verify your account:</div>

<div id="first_form"><form id="mainform" action="bconfirm" method="get">

<div id="left">

<div id="number"><h2>*</h2>Number: <b style="margin-left: 10px; font-size: 14px">{$BTNDisplay}</b></div>

<div id="number"><h2>*</h2>First:<input name="first" type="text" class="textbox2" id="first" tabindex="1" value="{$first}"/></div>

<div id="number"><h2>*</h2>Last:<input name="last" type="text" class="textbox2" id="last" tabindex="2" value="{$last}"/></div>

<div id="number"><h2>*</h2>Email:<input id="email" name="email" type="text" tabindex="3" value="{$email}"/></div>

<!--End left --></div>

<!--[if IE 6]>

<div id="right2">

<![endif]-->

<![if !(IE 6)]>

<div id="right">

<![endif]>

<div id="last_four"><h2>*</h2>Last 4 digits of your Social Security Number:</div>

<div id="social_security">#*$!-XX-<input id="ss" name="ss" type="password" size="4" tabindex="4" maxlength="4"/></div>

<div id="to_verify">To verify your account please provide the last 4 digits of your Social Security Number. <a id="whatsthis" tabindex=-1 href="#">What's this?</a></div>

<!--End right --></div>



<div style="clear:both"></div>

<div id="verify_account">Billing address for phone line:</div>



<div id="left">

<div id="number"><h2>*</h2>Address:<input id="address" name="address" type="text" class="textbox2" tabindex="5" value="{$address}"/></div>

<div id="number"><h2>*</h2>State:<select id="state_select" name="state_select" tabindex="7"><option value="">-- Select --</option>{html_options options=$arrStates selected=$state_select}</select></div>

<!--End left --></div>

<!--[if IE 6]>

<div id="right2">

<![endif]-->

<![if !(IE 6)]>

<div id="right">

<![endif]>

<div id="number"><h2>*</h2>City:<input id="city" name="city" type="text" class="textbox2" tabindex="6" value="{$city}"/></div>

<div id="number"><h2>*</h2>Zip:<input id="zip" name="zip" type="text" class="textbox2" tabindex="8" value="{$zip}" maxlength="5"/></div>

<!--End right --></div>

<div id="captcha" style="padding-bottom: 20px">{$strCaptcha}</div>

<div id="verbage">

{counter start=9 print=false}

{loop $verbage}

{if $Confirmation eq 'Y'}<div id="yes"><input id="yes_check" name="accept_terms" type="checkbox" value="" tabindex="{counter print=true}" class="required"/>YES</div>

<div id="disclaimer">{$Verbage}</div>

{else}

<div id="disclaimer">{$Verbage}</div>

{/if}{/loop}

<!--End verbage --></div>

<div id="submit"><a href="javascript: submitForm();" class="thickbox"><img id="submit_button" src="/img/next.jpg" width="88" height="43" border="0" tabindex="{counter}" /></a></div>

<div id="other"><a href="bcancel">Choose Another Payment Method</a></div>

</form><!--End first_form --></div>

<!--End grey_box --></div>

<!--End main_body --></div>

<div id="bottom_border"><img src="/img/verify_bottom_border.jpg" width="735" height="20" /></div>

<div id="footer">

RKTexas

8:16 pm on Aug 20, 2010 (gmt 0)

10+ Year Member



Please close thread I have fixed it.

Cowgirl

6:07 pm on Aug 30, 2010 (gmt 0)

10+ Year Member



RKTexas, what did you do to fix your problem? I'm having the same type of issue right now. I use a div statement to set a picture in a certain place. It looks great in IE, but shifts right and up in Safari, Chrome, & Firefox. Just trying to find any help available.

Thanks in advance!

Cowgirl

6:09 pm on Aug 30, 2010 (gmt 0)

10+ Year Member



Sorry, I forgot my example:

<div id="hometext15" style="position:absolute; width:100px; height:10px;z-index:5; left: 480px; top: 339px;"><img src="/indura.jpg"></div>
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 4:14 pm May 1, 2026