CSS - Alignment Out When Viewing In Ie7

When I view my Dreamweaver CS4 html page on Firefox, the AP elements I used on it are not viewing properly. They are getting bumped down a bit and thus misaligning with other elements on the page. Any suggestions? Thanks.

So I have a myspace, and I like things neat and compact. And I like filling out lots of long surveys that most likely no one will ever read, and posting them on my myspace. But when I do that, my page becomes very long and I don't like that. So my idea was something like this:

There would be a series of links across the top that would correspond to the various surverys and/or other content that I deem necessary to share with the world. The many users who visit my page looking for more details about my life click on the link of their choice. The box below all the links shows that particular survey. They read it all, and of course want more, so they click the next link. And poof, a new survery shows up right where the other one was. Compact and efficient.

I've seen sites use a slightly similar system before, often in the help/faq sections. You find the topic you need help with, click on it, and it pops up below it. However I'm pretty sure they used javascript, which isn't allowed on myspace. ("Security" or some other overrated matter). Therefore I would have to do it with CSS. I was thinking have each survey in a different table, all absolute positioned in the same place. Then when you click the link, either all the rest get visibility turned to not visible, (and that one turned to visible), or perhaps the z-index is changed. However I'm not sure you can do that in a link, especially without javascript. So I may need to find an alternative. Unfortunately, I'm not very good with CSS at all, and I'm also not very creative in problem solving.

Does anyone have any ideas on how I could implement this system without javascript or using other pages? (I just get my one little myspace homepage, although I guess I could cheat and use blog pages too. But then all the other blog crap like comments would show up on it).

I apologize if this has already been covered, I tried to look through the more recent posts for something similar and found nothing, and I wasn't really sure what to search for, since it isn't really something concrete I'm working with. I don't necessarily need code, mostly just ideas right now.

Thanks in advance to anyone who helps, and if you don't know what I'm talking about/thought it was too long, tell me and I'll try to clear it up or shorten it up, respectably (and respectfully, as it were).

PS. My myspace account, if you care and didn't already guess, is www.myspace.com/mynameismolotov. Althought it's basically empty right now.

if you take a look at http://www.cherrysociety.com/mag/art/

you'll see it works fine in IE, but when it is viewed in firefox it's so messed up. can anyone help me? tell me what i've done wrong?

the css is at http://www.cherrysociety.com/mag/style.css

thanks guys, i appreciate it a lot.

Hello...

Here is the site I'm having issues with ralphwall.com I'm noticing that it only happends in IE6 and not other browsers. It's shifting my float:right; column down the page.

Here is the code in my css. Could anyone please help? I'm starting to pull my hair out.

Thanks in advance.

body{
cursor:url("assets/mouse.cur");
background-color:#20110A;
overflow:hidden;
font-family:Georgia, "Times New Roman", Times;
font-size:14px;
color:#FEF5E0;
}
a:link{
color:#FEF5E0;
background-color:#7E5F33;
}
a:visited{
color: #FEF5E0;
background-color: #7E5F33;
}
a:hover{
color: #7E5F33;
background: #FEF5E0;
}
img{
border:0;
}
ul{
list-style-type:square;
}
#header{
float:left;
width:90%;
padding-left:5%;
padding-right:2.5%;
}
#header h1{
font-family:Georgia, "Times New Roman", Times;
font-size:36px;
font-style:italic;
color:#7E5F33;
}
#topnav{
float:right;
width:95%;
padding-right:2.5%;
text-align:right;
border-top: solid #7E5F33;
}
.hovermenu ul{
padding-left: 0;
margin-left: 0;
height: 16px;
}

.hovermenu ul li{
list-style: none;
display: inline;
}

.hovermenu ul li a{
padding: 2px .5em;
text-decoration: none;
float: right;
color: #FEF5E0;
background-color: #7E5F33;
border: 2px solid #7E5F33;
}

.hovermenu ul li a:hover{
background-color: #20110A;
border-style: outset;
}

html>body .hovermenu ul li a:active{ /* Apply mousedown effect only to NON IE browsers */
border-style: inset;
}
#left{
float:left;
width:20%;
padding-left:5%;
padding-right:2.5%;
}
#right{
float:right;
width:60%;
padding-left:5%;
padding-right:2.5%;
text-align:left;
verticle-aling:top;
}
#right h1{
font-family:Georgia, "Times New Roman", Times;
font-size:24px;
font-style:italic;
color:#7E5F33;
}
#footer{
float:right;
width:95%;
padding-right:2.5%;
font-style:italic;
text-align:right;
}

I have two columns (menu and content) and would like them to be horizontally aligned to the center sensitive to the size of the browser and relative to each other.

I have figured out how to do this with the content column (right one) but I'm having trouble doing this with the menu column. I would like it to be equally space relative to the placement of the content column.

Any help would be appreciated. Here's the code:

Code:

/ { 	margin: 0; 	padding: 0; }  
body { 	font-size: 12px; 	font-family: Helvetica Neue, Arial, Verdana, sans-serif; 	background: #F2F2F2; }  
body.section-1 { } 
body.section-2 { } 
body.section-3 { }  
a:link { text-decoration: none; } a:active { text-decoration: none; } a:visited { text-decoration: none; color: #666; }  a:hover {      background-color: black;     color: #f2f2f2;  }  a img { border: none; }  

#menu {     width: 130px;     overflow: hidden;     top: 40px;     position: fixed;     height: 100%;     background-color: #e6e6e6;     text-align: left;     margin: 0px 0px 0 0px 180px;     left: 12%; }  

#menu ul { 	list-style: none; 	margin: 0px; }  

#menu ul li.section-title { }   
#content {     height: 150%;     width: 700px;      margin: 0 0 0 300px;     top: 40px;     position: relative;     background-color: white;     overflow: auto;     padding: 15px;      margin-left: auto;     margin-right: auto; }  .container {     padding: 0px; }  

#content p { width: 400px; margin-bottom: 15px; }  
p {     margin: 0 0 9px 0; }  h1 { font-size: 32px; } h2 { font-size: 24px; } h3 { font-size: 16px; } h4 { font-size: 12px; }  

#img-container	{ margin: 0; padding: 0; } 

#img-container p	{ width: 400px; margin: 0; padding: 0 0 12px 0; }  #once { clear: left; }

Hi,

I am trying to convert my table design to CSS and building the bare structure now but having some troubles with the alignment/layout.

I want to move the left and right columns under the header div. but with float: left, they keep sticking to each other.

here is the link:

http://www.internationalnannies.com/test/

here is my CSS:
Code:

/* Structure setup */

#header {
	background-color: Aqua;
}

#body {
	background-color: grey;  	
}


#leftColumn {
	background-color: silver;
	float: left;
  width: 150px;
  position: relative;
}

#rightColumn {
	background-color: blue;
	float: left;
  width: auto;
  position: relative;
}

#footer {
  background-color: pink;
  clear: both;
  position: relative;
}

#photo {
  background-color: grey;
  margin-right: 5px;
  float: left;
  position: relative;
}

#headerRightContent {
  background-color: red;
  position: relative;
  float: left;
}
/* *********************************** */

and here is my html:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
  <head>
    <title>index</title>
    
    <style type="text/css">
      @import "styles.css";
    </style> 
    
  </head>
  
  <body>
  
    <div id="header">
    
      <div id="photo"><img src="images/noImage.gif" width="120" height="160" alt="noImage (1K)" /></div>
      <div id="headerRightContent">right content</div>
    
    </div>
    
    <div id="body">
      <div id="leftColumn">left</div>
    
      <div id="rightColumn">right</div>
    </div>
    
    <div id="footer">footer</div>
  
  </body>
</html>

Can someone do a quick review of this and comment?

Thanks,
Edwinx

hey all... i have got a prob with a area in IE. It looks great when the users browseer is fullscreen and no favourites/history etc window is open. However once the window is resized or fav's are turned on then the content div drops to the bottom works fine in Moz FF but can't make it work in IE..

any ideas from anyone would be really great. thanks

the link to the page is here

and for the css click here

thanks in advnaced !

RF

Been trying to get these divs to align but with no success.

Can someone be so kind to show me how to get the XHTML/CSS to look like the attachment below...

PHP Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html dir="ltr" lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
<title>Top Bar</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
<!--/*--><![CDATA[/*><!--*/
.bdr
{
 width:100%;
 height:122px;
 background-color:#aaaaaa;
 text-align:center;
 border:#000000 3px double;
}
.lchief
{
 float:left;
 width:69%;
 height:122px;
 background-color:#ffffff;
 text-align:center;
}
.rchief
{
 float:right;
 width:382px;
 height:122px;
 display:block;
 position:relative;
 padding:0px 0px 0px 0px;
 background-color:#a0a0a0;
}
.stats
{
 float:left;
 width:221px;
 height:102px;
 margin: 0px 0px 0px 20px;
 padding:10px;
 background-color:#e0e0e0;
 font:9pt verdana;
 line-height:12px;
 text-align:center;
}
.tmar
{
 float:left;
 width:72px;
 height:19px;
 margin-top:10px;
 margin-right:2px;
 background-color:#bbbbbb;
 line-height:15px;
}
.tmar2
{
 float:left;
 width:72px;
 height:19px;
 margin-top:2px;
 margin-right:2px;
 background-color:#bbbbbb;
 line-height:15px;
}
.tnom
{
 float:left;
 width:72px;
 height:19px;
 margin-top:10px;
 background-color:#bbbbbb;
 line-height:15px;
}
.tnom2
{
 float:left;
 width:72px;
 height:19px;
 margin-top:2px;
 background-color:#bbbbbb;
 line-height:15px;
}
.sidemenu
{
 float:right;
 width:73px;
 height:102px;
 margin: 0px 20px 0px 0px;
 padding:10px;
 background-color:#c0c0c0;
 font:7pt verdana;
 text-align:center;
}
/*]]>*/-->
</style>
 </head>
  <body>
    <div class="bdr">
      <div class="lchief">
       IMAGE
        </div>
        <div class="rchief">
          <div class="stats">
            <div class="tmar">
              TBA
            </div>
            <div class="tmar">
              TBA
            </div>
            <div class="tnom">
              TBA
            </div>
            <div class="tmar2">
              TBA
            </div>
            <div class="tmar2">
              TBA
            </div>
            <div class="tnom2">
              TBA
            </div>
            <div class="tmar2">
              TBA
            </div>
            <div class="tmar2">
              TBA
            </div>
            <div class="tnom2">
              TBA
            </div>
            <div class="tmar2">
              TBA
            </div>
            <div class="tmar2">
              TBA
            </div>
            <div class="tnom2">
              TBA
            </div>
          </div>
          <div class="sidemenu">
            TBA<br />
            TBA<br />
            TBA<br />
            TBA<br />
            TBA<br />
            TBA<br />
            TBA<br />
          </div>
      </div>
    </div>
  </body>
</html> 





TIA,
Taro

I am working on a site that I have taken over development of and there is an alignment problem here any ideas on what the problem is or how to fix it? Thanks!

HI,

I'm trying to get a line of text to lineup with a textbox using css. The code I have is as follows:

Code:

.row {
  height: 30px;
  vertical-align: text-top;
}

.formField {
  border: 1px solid #666;
  width: 150px;
  background: #FFFFFF;
  color: #000000;
}


<body>

   <div class="row">
   xxxxx: <input type="text" class="formField">
   </div>
 
</body>

The textbox is sitting just above the text. How can I get them lined up properly?

Hello,

I have a question of aligning a layout using CSS. I have 3 blocks in the layout and I would like them to be on the same level (on the top). They are all contained within a container. So it's Container {imagebox, greeting, menu}.

I could get the imagebox and greeting's top to match up but for some reason I just couldn't do the same for the menu block (except when I use negative margin, i.e. -32px)


Here's my code:

.pk #container
{
width: 60%;
background: #FFFFFF;
margin: 0px auto;
border: 1px solid;
margin-top: 50px;
padding: 10% auto;
}

.pk #imagebox
{
width: 20%;
margin: 10px 10px 10px 17%;
padding: 0;
background: #000000;
color: #ffffff;
float: left;
}

.pk #greeting
{
width: 20%;
margin: 10px 10px 10px 38%;
padding: 0;
font-family:Calibri;
font-size:36px;
text-align:center;
}

.pk #menu
{
width: 20%;
margin: 10px 10px 10px 59%;
background: #000000;
color: #ffffff;
text-align:center;
vertical-align:top;
}

I would really appreciate it if someone could guide me on this. I'm thinking of float, but doing that only messes the whole layout up.

Hello everyone.

Another episode of stupid CSS tricks here!

h-t-t-p://rewards.yarnell.openi.com/

This site looks good in IE8, Firefox, Safari, Chrome. Only older IE shows the rightmost DIV, the main content area, as underneath the rest of the page. This is not my first CSS only site, but for some reason, I can't figure out why it isnt displaying correctly in older IE. If you are using IE8 and need to see it broken, just throw the site into compatibility mode.

I have all the DIV styles in the source, not in a stylesheet to make it easy for anyone to help me with this.

I just know this is going to be something simple, and thank you in advance to anyone kind enough to give this a look!

Have a great day!

Hi Guys,

I'm trying to create a simple search form. It will be a set of horizontal links seperated by pipes '|' with a simple form field search box below the set of links. I've it pretty much laid out how I want, but the links above the search box are not alinging with the search box correctly. I want the links pushed up against the text box.

Here is a pic showing how I want it to look. The first search box is how my code display now. The second box is what I am trying to achieve.

http://i617.photobucket.com/albums/...aderexample.jpg


Here is the code I have. I'm hoping to create a div that will wrap around this code and contain it well. I have a div defined in the code, but it doesn't have any attributes.

Any advice on how to change this to get it to display how I want? Please note, the span/class attributes found in the code relate to a style sheet I have defined elsewhere. However, it doesn't affect the alignment so I didn't include the stylesheet. There is no other CSS defined yet. My guess is I need to define a class for the DIV and parameterize that class to smash the two elements (links and search box) together.


Code:

<div>

<a href="http://www.company.com" class="active" title="Cars for Sale">
<span class="headersearchlink">Vehicles</span></a>

<span class="mediumtext">|</span>
<a href="http://www.company.com" class="active" title="Aircraft">
<span class="headersearchlink">Aircraft</span></a>

<span class="mediumtext">|</span>
<a href="http://www.company.com" title="Homes for Sale or Rent">
<span class="headersearchlink">Homes</span></a>

<span class="mediumtext">|</span>
<a href="http://www.company.com" title="Apartments">
<span class="headersearchlink">Apartments</span></a>

<span class="mediumtext">|</span>
<a href="http://www.company.com" title="Jobs & Resumes">
<span class="headersearchlink">Jobs</span></a>

<span class="mediumtext">|</span>
<a href="http://www.company.com" title="Pets for Sale">
<span class="headersearchlink">Pets</span></a>

<span class="mediumtext">|</span>
<a href="http://www.company.com" title="Items for Sale">
<span class="headersearchlink">Items for Sale</span></a><br>

<form method="post" action="" name="search-form">
<INPUT class="headersearchinput" type="Text" name="postal" size="85">
<INPUT class="headersearchinput" type="submit" name="search" value="search">
</form>

</div>

I'm using a background image but am having a hard time indenting the text.
Code:

ul.leftside li {
       font: bold 11px Helvetica,sans-serif;
       color: #FFF;
       background: url(images/left_menu-bg.jpg) no-repeat;
       margin: 7px 10px 5px 4px;
       list-style-type: none;
    }

<ul class="leftside">
<li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Rooms</li>
<li>Reservations</li>
<li>Siteseeing</li>
<li>Contact Us</li>
 </ul> 

The only way I can move the text over is by adding the non-binding spaces and I can't seem to get a style to work in the line item either.

Thanks in advance!