|
CSS - Iam Having A Alignment Problem While Zoomin In And Out
hello people
i built my website using html and css and i completed the frontpage but iam having a serious issue with the page whe i zoom in or our in firefox (ctrl+MouseScroll) , the middle area in the page is remainng on the same place but the right and left areas are floating away from the middle area of the page , so i need to know how can i fix that , the url for my page is (satnav-eg.com/test2) , please check it out and try to help me with this issue thanks in advance Similar TutorialsI'm using this layout, modified quite a bit for visual design, but the "mechanics" are the same as the author's demo for the most part: http://matthewjamestaylor.com/blog/...rail-pixels.htm The top navigation is a horazontal list aligned to the left. What I would *like* to do is have all of the nav "tabs" aligned to the left as they are now, except the last one, aligned to the right. Sort of like this: TTTT_____T Any ideas? OK, I somehow became a css n00b overnight (I've made 4-5 websites heavily using css.) Basically, here is what I want: Code: style :: [ ] [ ] And here is what I'm getting: Code: style :: [ ] [ ] For some reason the boxes won't align with the text. No matter what I do! Here is the link to see: http://www.sential.co.uk/test.php Here is the html: Code:
<div id="style_selector">
<p>style ::
<a href="#" onclick="setActiveStyleSheet('SE001');
return false;" title="change to style: Underwater - Water Planet"><div id="style_se001">Blue</div></a>
<a href="#" onclick="setActiveStyleSheet('SE002');
return false;" title="change to style: Orkidea - Beautiful"><div id="style_se002">Orange</div></a>
</p>
</div>
And here is the css: Code:
#style_selector{
position: absolute;
top: 70px;
left: 160px;
height: 25px;
width: 100%;
text-align: left;
}
#style_se001{
float: left;
height: 15px;
width: 15px;
text-indent: 10000px;
overflow: hidden;
background-color: #6187E1;
display: block;
border: 1px solid #ffffff;
}
#style_se001:hover{
border: 1px solid #6187E1;
}
#style_se002{
float: left;
height: 15px;
width: 15px;
text-indent: 10000px;
overflow: hidden;
background-color: #FCB029;
display: block;
border: 1px solid #ffffff;
}
#style_se002:hover{
border: 1px solid #FCB029;
}
I'm sure it's something simple, yet I've tried switching positioning attributes and everything, and the code for aligning these boxes is IDENTICAL to the menu buttons at the top. I'm totally miffed -Luke Hi! I'm new to this forum, but I'm hoping you can help me! Included is my CSS coding. I am having a little bit of trouble getting #siteAds to have the correct width after adding borders to the three #mainContent. When I tweak the pixel amount it either runs onto the next line or just doesn't line up properly with #siteNav and #footer. I've tried replacing the pixel counts with percentages; doesn't work. I'm relatively new at CSS so any help would be appreciated. Thanks in advance! Code: <style type="text/css">
body
{
background-image:url('bg-1.jpg');
background-repeat:no-repeat;
background-position:top;
background-color:#FFF;
background-attachment:fixed;
}
* {
margin: 0px;
padding: 0px;
}
#wrapper {
height: 1300px;
width: 1000px;
margin:0px auto;
text-align:left;
}
#branding {
height: 228px;
width: 1000px;
}
#branding #logo {
height: 228px;
width: 1000px;
position: relative;
background-image:url('hooplogolarge.jpg');
background-repeat:no-repeat;
background-position:top;
background-color:#000000;
}
#siteNav {
height: 38px;
width: 1000px;
color: #FFF;
background-color: #000;
line-height: 38px;
clear: both;
font-family: Arial, Helvetica, sans-serif;
float: none;
text-align: center;
word-spacing: normal;
font-size: 24px;
}
#mainContentWrapper {
float: none;
width: 1000px;
background-color: #FFF;
}
#mainContentWrapper #news {
float: left;
width: 265px;
height: 953px;
background-color:#FFF;
border: thin dashed #000;
padding: 10px;
}
#mainContentWrapper #mainContent {
float: left;
width: 488px;
height: 953px;
background-color:#FFF;
padding: 10px;
border: thin dashed #000;
}
#mainContentWrapper #siteAds {
float: right;
width: 175px;
height: 953px;
background-color:#FFF;
padding: 10px;
border: thin dashed #000;
}
#footer {
width: 1000px;
font-size: 9px;
color: #CCC;
text-align: center;
line-height: 35px;
background-color: #000;
clear: both;
}
</style>
My page looks great, except in IE 6 where the green header shifts left instead of staying centered. I don't know why!!! It can be viewed at: http://www.descom.org/testing/home.html Roll over "About" and then click on any of its sublinks. The CSS sheets a http://www.descom.org/testing/allianceStyles.css and: http://www.descom.org/testing/ie6.css THANK YOU! Thanks for taking the time to read my question. Have posted 2 examples of my problem. Example 1: http://www.pierced.ca/Kelly/indexCOPY.htm Page http://www.pierced.ca/Kelly/kelly1.htm CSS http://www.pierced.ca/Kelly/kelly1.css CSS (this one will download) Here my rounded corners don't line up to the bottom of the "info" area. Not sure why. Example 2: http://www.pierced.ca/Kelly/indexCOPY2.htm http://www.pierced.ca/Kelly/kelly2.htm CSS http://www.pierced.ca/Kelly/kelly2.css CSS (this one will download) Here my rounded corners line up, but I get an extra space under the "menu" section. Not sure why. I am totally stuck. I am not sure how to fix it. I have tried adding height to the menu, but that doesn't work. Thanks for you help, Brad OK, I've got this page currently: http://www.brianellisrules.com/stickers/pics/ (click on a state) I'm trying to add a caption to each thumbnail showing the date: http://www.brianellisrules.com/stic...s/testindex.php (click on a state, preferably NY or NJ since they have a lot of pics) In the first version, I have all the pictures centered and they're all vertically aligned to the middle (of the row). In the second version, I switched over to floating div's so I could center each date below each thumbnail. That works great, however, all the thumbnails are left aligned. I tried adding a div around the thumbnails with everything centered, but no dice. How do I center the row of thumbnails? Also, how do I align the thumbnails to the center of the row (or at least the prev/next arrows)? Thanks! oh yeah, here's the CSS: div.thumbrow { clear: both; padding-top: 10px; margin-left: 20%; margin-right: auto;} /*THE MARGIN IS JUST A TEMP FIX, BUT NOT WHAT I WANT. I'D LIKE FOR IT TO BE CENTERED*/ div.float { float: left; text-align: center; } div.float p { text-align: center; margin: 0; font-size: 0.8em; } Hi Im a newbie to this site and to web page building so Im no sure if this is the right spot to be posting, but I think my problems are css related. Ive designed my web page with a 3 column layout the when I insert text into the left and middle columns the text starts from the top of the page like its ment to, but for some reason when I insert text into the right column it starts from the bottom of the page instead and I cannot work out why? Does anyone have any ideas? Is it css related or html? 2nd Issue how do I get the menu bar to float to the centre of the screen instead of the left? Ive tried so many things and it just make it worse. I know its hard without pics. I'm trying to change over from coding HTML tables to using CSS and I'm still new at this. Thanks in advance to anyone who can help me out with this alignment issue. For the main content of this page, I'd like the text to be left-aligned, but it's showing up as centered. I'm hoping it's some obvious oversight on my part that someone might easily see and point out to me. Thanks! Here's my HTML: Code: <center>
<div id="hpMaincanvas">
<? include('includes/topnav.php'); ?>
<div id="aboutArea">
<h2>About VERVANO</h2>
VERVANO was born as a solution to a problem in the furnishings world. Accustomed to having the world's resources at our finger tips through our connections
with colleagues and vendors, internet research and in-person travel, the LBD team was at a lost for sourcing sustainable furnishings for their own space.<P>
This compelling desire became a need which launched this eco-conscious furnishings line from the Laura Britt Design studio in Austin, TX.<P>
Founded with the hope that our small input could have impact on the future of the design industry, the team has held fast to the sustainable sourcing and
building model through all of the subsequent ups and downs. Although 'green' is now a standard buzz word it's not a standard practice. Each step of this
process has been met with rigorous research and challenging sourcing.<P>
Thankfully, VERVANO remains true to its original intent - built close to home using sustainable materials. Our interest lies in using materials which are
rapidly renewed in nature, sustainably sourced and support a healthy indoor air quality through low VOCs.<P>
It's still a long road until this is a mainstream way of designing, sourcing, and building furnishings- but we're doing our part to bring this step closer to home.
Thanks for your interest and support of our endeavor.
<br><img src="art/space.gif" alt="" height=12 width=1><br>
<img src="art/laura.jpg" align=left alt="Laura Britt, founder of Vervano"><h2>About Laura Britt Design</h2>
<span class="label">EDUCATION AND BACKGROUND</span><br>
Ms. Britt earned a B.S. in Interior Design from Oklahoma State University in 1992.
She went on to manage and design large scale, multi-million dollar interior design
and architecture projects for the United States Air Force Academy. She later
enrolled in the University of Texas at Austin in 2000 and received a Masters Degree
in Architecture with emphasis in Sustainable Design. Through her architectural
background she developed a contextual understanding of buildings as integrated
systems. Following her graduation from the University of Texas she subsequently
worked in complex hospitality design and architecture in Austin, TX, giving her a
unique and real-world perspective regarding many attributes of public space design. <P>
<span class="label">ON BUDGET, ON TIME AWARD WINNING COMPANY</span><br>
Laura Britt Design is an award winning full service design firm. Value-added design, teamwork and attention
to detail are at the foundation of each project. Starting with the specifications of the client, the firm integrates
architectural and interior design solutions to create on budget, on time, functional environments. <P>
<span class="label">SUSTAINABILITY & LEED</span><br>
Laura Britt designs are based on the vision and mission of the end user. Laura Britt Design firm is
recognized as a leader in sustainable design practices and has multiple LEED certified designers on staff. <P>
<span class="label">OUR TEAM</span><br>
The design team has approximately 75 years of cumulative experience and training. Each is professionally
trained to identify the key factors driving the architecture and design and construction of each building
project with the facilities team and architecture team.
Our technical expertise includes cost estimating, utilization of CAD technology, project management, on site
quality control inspection, specification of furnishings and finishes, space planning and 3D modeling and
rendering. <P>
<span class="label">Associations</span><br>
Vervano is a proud member of the <a href="(URL address blocked: See forum rules)" target="new">Sustainable Furnishings Council</a>.
<br><img src="art/space.gif" alt="" height=8 width=1><br>
Laura Britt Design is recognized as a HUB by the State of Texas due to it's designation as a Woman Owned
Business. HUB certification was granted in November or 2008. The firm is also listed on the states Central
Master Bidders List. <br><img src="art/space.gif" alt="" height=8 width=1><br>
Laura Britt Design is a member of The Best Practices Network - Interior designers committed to on-time,
on-budget projects through continuing business education and the sharing of best practices.<P>
</div>
<? include('includes/footer.php'); ?>
</center>
Here's my CSS: Code:
body {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
color: #645133;
background: url(art/bg.jpg);
background-repeat: no-repeat;
background-position: center top;
}
h1 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 30px;
font-weight: lighter;
color: #49320f;
}
h2 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16px;
color: #49320f;
margin-top: -20px;
font-weight: lighter;
line-height: 36px;
}
#hpMaincanvas {
position: relative;
padding: 0px;
width: 900px;
margin-top: 35px;
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
z-index:5;
}
#socialMedia {
position: relative;
font-family: georgia,palatino,serif;
font-size: 12px;
color: #bbb38c;
line-height: 17px;
font-style: italic;
padding-right: 50px;
width: 900px;
text-align: right;
}
#MainArea {
position: relative;
padding-right: 50px;
padding-top:0px;
width: 900px;
text-align: center;
z-index:20;
}
#AboutArea {
position: relative;
padding-right: 50px;
padding-left: 50px;
padding-top:30px;
width: 800px;
z-index:20;
text-align:left;
}
#footer {
position: relative;
text-align: center;
}
#navigation {
position: absolute;
top:40px;
width: 600px;
left: 320px;
font-weight: normal;
z-index:25;
margin-left: auto ;
margin-right: auto ;
}
li {
list-style: none;
float: left;
position:relative;
}
ul {
padding: 0;
margin: 0;
list-style: none;
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
text-transform: uppercase;
text-decoration: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul {
display: none;
border: 1px solid #e2ddbe;
}
ul li a {
display: block;
text-decoration: none;
text-align:left;
color: #594425;
padding: 7px 7px 7px 7px;
white-space: nowrap;
}
ul li a:hover {
color: #d93800;
}
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
background: #efede1;;
}
li:hover a {
}
li:hover li a:hover
{ background: #ffffff; }
.logo {
position: absolute;
top: 30px;
left: 50px;
}
.label {
font-family: Helvetica, Arial, sans-serif;
font-size: 11px;
text-transform: uppercase;
line-height: 19px;
letter-spacing: 2pt;
color: #a99573;
}
.copyright {
font-family:georgia,times,serif;
font-size:11px;
color:#beb692;
text-align:center;
}
a.copyright, a.copyright:link, a.copyright:visited {
text-decoration:none;
font-family: georgia,times,serif;
font-size: 11px;
text-align:center;
}
a.copyright:hover {
text-decoration:underline;
}
.middle, .submit {
vertical-align: middle
}
I have this in my other thread but I decided to make a new thread since my old thread was pertaining to a seperate issue. OK well I have validated my CSS and am now getting no errors on it, warnings about the font-family but that is an easy change and isn't priority right now. That fixed a couple minor things that I had missed. But the current problems a 1.) Every div past the #space div appears to be a couple pixels short in terms of width, as the right border doesn't line up with the border from #topright, #space, #grayfade, and #bannercell. 2.)Now in FF its all screwy. It wont display one div next to another, it puts it in the correct position on the right, but bumps it down below the div it is supposed to be next to. The DTD I have on the page right now is <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Please let me know if this is confusing or you need anything else. Thanks CSS: Code:
html {height:100%;}
body{
margin:0; padding:0; height:100%;
font-family:Times New Roman, serif;
background-color:white;
}
#wrap{
background-image:url(bgimage.jpg);
background-position:top left;
background-repeat:repeat-y;
min-height:100%;
width:790px;
margin:auto;
}
* html #wrap {height:100%}
#header{
background-image:url('keyboard.jpg');
background-position:left;
background-repeat:no-repeat;
background-color: #FEFEFE;
margin:0; padding:0;
height:117px;
width:615px;
border-left: 1px solid #777777;
float:left;
}
p{
margin:0px; padding:0;
font-family: courier;
}
p.headline{
margin:0px; padding-left:5px;
font-family: arial;
font-weight:bold;
font-size:70%;
}
p.news{
margin:0px; padding-left:5px;
font-family: arial;
font-size:70%;
color:#808080;
}
h1{
position:relative;
line-height:0px;
margin:0; padding-left:10px;
font-size:115%;
color:#1B018E;
}
#left{
float:left;
width:200px;
text-align:left;
background-color:#FFFFFF;
border-left: 1px solid #777777;
border-right: 1px solid #777777;
}
#main{
float:right;
clear:both;
text-align:left;
width:565px;
border-right: 1px solid #777777;
}
#clearfooter{
clear:both;
height:30px;
overflow:hidden;
}
#footer{
height:30px;
background-color: #777777;
margin:0 auto; padding:0;
margin-top:-30px;
color:#FFFFFF;
text-align:center;
width:790px;
}
#bannercell{
float:right;
clear:both;
background-color:white;
text-align:right;
width:175px;
height:117px;
font-size:75%;
margin:0; padding:0;
border-right: 1px solid #777777;
}
#borderleft{
border-left: 1px solid #777777;
}
#topright{
float:right;
clear:both;
background-color:white;
text-align:right;
width:175px;
height:53px;
font-size:75%;
margin:0; padding:0;
border-right: 1px solid #777777;
}
input.box{
height:17px;
}
#linkbanner{
width:615px;
height:19px;
float:left;
text-align:left;
border-left: 1px solid #777777;
background-color: #777777;
}
#grayfade{
float:right;
clear:both;
border-right: 1px solid #777777;
background-image:url(gray_grad.jpg);
width:175px;
height:16px;
}
#space{
border-right: 1px solid #777777;
border-left: 1px solid #777777;
background-color: #FFFFFF;
height:25px;
width:790px;
}
#extraspace{
float:right;
clear:both;
border-right: 1px solid #777777;
background-color: #FFFFFF;
height:25px;
width:565px;
}
#newsbar{
background-image:url(blue_grad.jpg);
background-repeat:no-repeat;
width:200px;
height:10px;
}
#mainbar{
background-image:url(blue_lg.jpg);
background-repeat:no-repeat;
width:565px;
height:10px;
border-right: 1px solid #777777;
}
#mainbarsm{
float:right;
clear:both;
width:565px;
background-image:url(blue_thin.jpg);
background-repeat:no-repeat;
height:5px;
}
#heading{
background-color: #FFFFFF;
margin:0; padding:0;
height:53px;
width:615px;
border-left: 1px solid #777777;
float:left;
text-align:left;
}
and my HTML: Code: <center> <body background="../images/bg_texture2.gif"> <div id="wrap"> <div id="heading"><img src="../images/logo.gif"><font face="Bodoni MT" size="5" color="#040C89"> Company Name</font></div> <div id="topright"><font color="#6666FF">Monday April 4, 2005</font></div> <div id="header"></div> <div id="bannercell"><center>.::Client Login::.</center> <br> <font size="2">username <input type="text" size="13" class="box"> password <input type="password" size="13" class="box"></font> <center><input type="submit" value="Login"></center></div> <div id="linkbanner"><font color="#FFFFFF" size="2">About Us | Services | Solutions | Help Desk | Training | Careers | Contact</font></div> <div id="grayfade"> </div> <div id="space"> </div> <div id="left"> <div id="newsbar"><h1>Recent News</h1></div> <p class="headline">.::New Website::.</p> <p class="news">We're launching a new website in the near future. Look for great things to come!</p><br> <p class="headline">.::Done using CSS::.</p> <p class="news">No tables with this design. "Out with the old and in with the new."</p><br> <p class="headline">.::Continuously Changing::.</p> <p class="news">With us having recent news on the website, the main page will be changing all the time with the latest info about Us and stuff</p><br> <p class ="headline">.::Sales Platform::.</p> <p class="news">We can also use this as an area for sales opportunities and promotion. It will be a good reference for all new products and features from Us.</p> </div> <div id="main"> <div id="mainbar"><h1>Your Cool Slogan</h1></div> <br> <p class="news"><strong>Intuitive.</strong> Having the knowledge and experience in a changing <img src="../images/imis.gif" align="right" border="0"> world to make expert decisions through perceptive insight. We allow your organization to tear down barriers by offering <strong>software solutions, innovative design, and managed services.</strong> Specializing in <i>sutff</i> and ore stuff</i> software we are able to expand the dimensions of your organization, and provide you with the solutions needed for an on demand world. </p> <div id="mainbarsm"></div> <p class="news">Having the knowledge and experience in a changing <img src="../images/microsoft.gif" align="right" border="0"> world to make expert decisions through perceptive insight. We allow your organization to tear down barriers by offering software solutions, innovative design, and managed services. </p> </div> <div id="extraspace"></div> <div id="clearfooter"></div> <div id="footer"> <center><font size="2">2005 Us. All rights reserved.<br> Site produced by a Web Guy, Content Manager.</font></center> </div> </body> </center> Hi, would you tell me please what do I have to do to make this code look in IE6 the same way as it looks in FireFox 3.0.5 In FireFox fields are as expected - City and ZipCode each on different lines. In IE6 they are on the same line (Zipcode label is on the same horizontal level as City)and the rest of the second line(Zipcode) starts at the beginning of the next line(without offset) Code:
<style type="text/css">
.formInput:after, .formInput .formField:after{
clear:both;display:block;visibility:hidden;height:0;content:'.'}
.formField {float:left;width:40%;}
.formInput{position:relative;}
.formInput div.ex{position:static;left:24%; width:5em}
.formLabel {float:left;width:25%;text-align:right;}
</style>
<div style="width:700px">
<form>
<div id="cityFld" class="formInput">
<div class="formLabel"><label for="city">City</label></div>
<div class="formField">
<input type="text" name="city" id="city" value="">
<div class="ex">city explanation</div>
</div>
</div>
<div id="zipFld" class="formInput">
<div class="formLabel"><label for="city">Zipcode</label></div>
<div class="formField">
<input type="text" name="zip" id="zip" value="">
<div class="ex">zip explanation</div>
</div>
</div>
</form>
</div>
Ok. I've got a calendar all set up, and it displays properly in its frame in Firefox. using firefox, try the following link: http://www.kennedygallery.org (click events calendar) in IE, the whole thing is right-justified or centered or something. Since I discovered the problem, I even started putting redundant declarations in the calendar's style sheet: Code: body {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
background : #FFFFFF ;
color : #505458;
margin: 0px;
margin-left: 10px !important;
width:590px !important;
}
.maintable {
position: absolute;
left: 10px !important;
margin-top: 0px;
margin-bottom: 0px;
margin-left:0px;
}
etc, etc. So is there a positioning bug or something that I have to work around to make it display as it does in Firefox? Thanks, Perry. ok when you take a look at http://www.mostardesigns.com/razorsedge/ you can clearly see what the alignment problem is. Here is the code below: HTML: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Razor's Edge</title>
<style type="text/css">
<!--
@import url("css/general.css");
-->
</style>
</head>
<body>
<center>
<table width="898" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="10"><img src="images/banner.jpg" border="0" alt="" /></td>
</tr>
<tr>
<td><img src="images/menu_1.jpg" border="0" alt="" /></td>
<td><img src="images/menu_home_1.jpg" border="0" alt="Home" /></td>
<td><img src="images/menu_servers_1.jpg" border="0" alt="Services" /></td>
<td><img src="images/menu_tournaments_1.jpg" border="0" alt="Tournaments" /></td>
<td><img src="images/menu_downloads_1.jpg" border="0" alt="Downloads" /></td>
<td><img src="images/menu_sponsors_1.jpg" border="0" alt="Sponsors" /></td>
<td><img src="images/menu_proshop_1.jpg" border="0" alt="Proshop" /></td>
<td><img src="images/menu_forums_1.jpg" border="0" alt="Forums" /></td>
<td><img src="images/menu_contact_1.jpg" border="0" alt="Contact" /></td>
<td><img src="images/menu_2.jpg" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="2"><img src="images/menu_3.jpg" border="0" alt="" /></td>
<td colspan="6" class="border_top"></td>
<td colspan="2"><img src="images/menu_5.jpg" border="0" alt="" /></td>
</tr>
<tr>
<td class="border_left"><img src="images/border_left_1.jpg" border="0" alt="" /></td>
<td colspan="8" class="bg_main">
<table width="832" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="bg_menu"><div class="bg_menu_left"> </div></td>
<td class="bg_center"><img src="images/tournament.jpg" border="0" alt="" /></td>
<td class="bg_menu"><div class="bg_menu_right"> </div></td>
</tr>
</table>
</td>
<td class="border_right"><img src="images/border_right_1.jpg" border="0" alt="" /></td>
</tr>
<tr>
<td><img src="images/bottom_1.jpg" border="0" alt="" /></td>
<td colspan="8" class="border_bottom"></td>
<td><img src="images/bottom_3.jpg" border="0" alt="" /></td>
</tr>
</table>
</center>
</body>
</html>
CSS: Code: /* BEGIN GENERAL SETTINGS */
body {
background-color:#B0D2F4;
background-image:url(../images/body_bg.jpg);
background-position:top;
background-repeat:repeat-x;
margin:0px;
text-align:center;
}
body, td, div {
text-align:left;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#333333;
}
/* BEGIN TD SETTINGS */
td.border_top {
background-image:url(../images/menu_4.jpg);
background-repeat:repeat-x;
}
td.border_left {
width:30px;
background-image:url(../images/border_left_2.jpg);
background-repeat:repeat-y;
vertical-align:top;
}
td.border_right {
width:30px;
background-image:url(../images/border_right_2.jpg);
background-repeat:repeat-y;
vertical-align:top;
}
td.border_bottom {
height:30px;
background-image:url(../images/bottom_2.jpg);
background-repeat:repeat-x;
}
td.bg_main {
background-color:#EFEFEF;
padding:3px;
vertical-align:top;
}
td.bg_menu {
background-color:#829CB5;
vertical-align:top;
padding:0px;
width:206px;
}
td.bg_center {
padding-left:2px;
padding-right:2px;
padding-top:0px;
padding-bottom:0px;
vertical-align:top;
width:420px;
}
/* BEGIN DIV SETTINGS */
div.bg_menu_left {
background-image:url(../images/menu_left_bg.jpg);
background-repeat:repeat-y;
vertical-align:top;
width:200px;
padding:2px;
margin:3px;
}
div.bg_menu_right {
background-image:url(../images/menu_right_bg.jpg);
background-repeat:repeat-y;
vertical-align:top;
width:200px;
padding:2px;
margin:3px;
}
Hi I have a website that i want to push to the center of the page for high resolutions.. i added a div tag for it as <div align=center> //all data here </div> now everything is pushed to the center except the menu divs and logo divs. they are pusing to the very center of the page, i mean starting from the center of the page and not on their proper place.. the problem is only in IE in firefox it works well.. here is my css code for logo and menu #header .logo{ margin: 15px 5px; position: absolute; } #header .menu{ position: absolute; margin-top: 1px; margin-left: 158px; } can anyone please advice me how can I fix this problem so that it works with ff and ie both thanks Hi, the foolowing code is highlighting some options that I have in a layer sitting on top of a tablet type object. In IE the options are displayed 'inside' the tablet. In Firefox they are spread out down the page into my footer, any ideas what I can add to contain them within the tablet layer? PHP Code: <div style="position: absolute; width: 100px; height: 100px; z-index: 1; left: 1px; top: 188px; visibility:visible" id="layer2"> <div style="position: absolute; width: 100px; height: 24px; z-index: 1; left: 46px; top: 35px; visibility:visible; right:0; bottom:0" id="layer3"> <p align="center"><font color="#4E261B"><b> <span style="font-size: 11pt"> <a href="home" style="text-decoration: none"> <font color="#4E261B">Home</font></a></span></b></font><p align="center"> <p align="center"> <font color="#4E261B"><b><span style="font-size: 11pt">About US</span></b></font><p align="center"> <p align="center"> <font color="#4E261B"><b><span style="font-size: 11pt">User Register</span></b></font><p align="center"> <p align="center"> <font color="#4E261B"><b><span style="font-size: 11pt">User Log-in</span></b></font><p align="center"> <p align="center"> <font color="#4E261B"><b><span style="font-size: 11pt">Supplier Log-in</span></b></font><p align="center"> <p align="center"> <font color="#4E261B"><b><span style="font-size: 11pt">Join Head2Toe</span></b></font></div> <img border="0" src="images/bridetablet1.bmp" width="190" height="302"></div> <p></div> <!-- to clear footer --> </div><!-- end outer div --> Layer 2 is the tablet, layer 3 is the text on top. if you need anything else, please let me know. Thanks, G Hi Please see watermark.sc It works fine in Firefox but header alignment is not proper in IE What might be the problem? San Hi All, I am new to devshed and new to css stuff. I have a problem with a site i am currently building. http://www.foodaffairs.co.za Basically there is a yellow link box underneath the flash image which in FF(Firefox) is out a little to the right and in IE out to the left. The yellow block is actually an image which is the same width as the flash image but just doesn't wanna line up. Anyone had this problem or could help me fix it? Thanks LoTi Hi everybody ! I'm having some trouble with a site i'm currently working on at (s328005659.onlinehome.fr/) the problem i'm experiencing is with facebook "like button" in the bar at the bottom, i haven't found a way to make it align with the other bookmark buttons on its left. It'd be great if you could help me with this issue... Thanks in advance, Joe I am trying to set up my post using a wordpress template I found on alexking.org called Blue Radiant. All was going well until I decided to make a few test news posts and it started doing something funky. http://www.unlimitedzelda.net If you view the site in Internet Explorer, it's fine. However if you view it in FireFox, you can see that all but the most current news post gets pushed under the left nav bar. I can't figure why and I hope someone else will be able to help me out. Any input is greatly appreciated. |
|||||||