CSS - Need Help [ Moving ]

IE is at it once again.... it is doing VERY odd things....

On the following page, when you roll over the title/type/date and description sections for the related article, it changes backgrounds... this is done mostly with CSS and the smallest amount of javascript (only onmouseover/mouseout is used).

It works great elsewhere, but not in IE... any suggestions at what it may be??

THE LINK

Hi -
I have been using xhtml coding for most of my web projects this year, thankfully they have been pretty simple. I have a new one, the client has requested it be xhtml compliant. I was not consulted during the design phase, so i have been give the task of programming a very table centric layout.
Can all designs be rendered with div's instead of tables?
I have a diagram of the structure of a template page and I am not sure how to go about tackling it. Do i start with each individual section? I just need a little push and confimation the below layout is doable in css/divs...

Thanks

My problem is getting very frustrating been trying to fix it for ages, and its probably something simple but if i dont fix it soon my laptops going to find a river very quickly.
I have a site using CSS(duh!) and when i highlight over a link on the site some of my text moves around. then when i highlight over my javascript drop down menu it moves back. its very strange.
heres the link to one of the worse pages for jumping. http://zephyr-wgtn.co.nz/newsite/eventS.aspx
Any help much appreciated.
Regards
Dan

Hey All,

Firstly, I apologise if this has already been answered. The search feature wasn't working for me, and to be frank, I didn't know what to search either!

Secondly, I'm developing a site with Joomla and am implementing my own design. I'm a bit of a CSS newbie, well un-experienced at least, and fail at being able to pick cross-browser bugs. Thus I have turned to the masters for help!

Ok - So this is what it should look like: BrowserShots in IE8

And this is what it shouldn't look like: BrowserShots in IE7

What it appears to be doing, to me, is pushing the logo div to the next line, as the pillmenu div is floated to the left. In the process of doing this, it stuffs up the margins and pushes the whole layout out.

On a second level, it appears to me that the background image is off centred, which COULD be BrowserShots being funny, but I'm not sure?

Live site is at: techmonkeys.com.au

I would love it if anybody could help me identify what bugs are occuring here. Or if it's just an error on my behalf, which it sure could be!

I also highly appreciate any advice, tips, or criticism you want to provide. But not about my menu! That's not done :P

Thanks in advance.

Cheers,
Chris

Hi

I recently moved a site "http://www.nikkilamann.com/index.php" and after moving it the CSS is all messed up (style.css)
The scroll frame box is not centred anymore and the scrollbar is supposed to be white in colour and there is some funny box next to "fashion" on navigation. Site is totally messed up after move.

Does anybody know what could cause this?

Hi, Hoping someone has had this same issue before.... I have a simple page separated with two images mainly. The main image that sets the initial design is the background image and then a footer image. To allow the page to be fluid I have set a content div to sit between the two and expand the color of the page to create the illusion of one flowing design. Nothing too strange there... In fire fox the design looks great however in IE7 it looks as though the content div has been shifted by 1-3px to the left...

Please see these two screen shots...
Fire Fox: (members.cox.net/~jeaddy/FF_ok.jpg)
IE7: (members.cox.net/~jeaddy/IE7_broke.jpg)

I have tried using a display:inline; within the content div and it fixes the issue but it causes the min-height setting to be ignored and actually messes up a few other things as well.

I have linked a copy of the pages generated html (members.cox.net/~jeaddy/html.txt) and the css file (members.cox.net/~jeaddy/default.css). I apologize for how long it is.

If anyone has ideas/suggestions i'm open to anything as this one little issue is about to drive me

Note: My account is new otherwise I would have made the url's clickable... Forum rules

I am trying to make a make my most popular table here http://www.pearl.ru/isdunyasi/defaultinner.asp?Section=4 look like http://www.pearl.ru/isdunyasi/newtable.gif. With the codes beow everything is fine expect the headline area. I need to move headline background 10px left to make it right.

Code:

#innersubcontent {
	float:right;
	width:300px;
	height:450px;
	background:#d7d7d7;
}
#innersubcontentpopular {
	float:left;
	width:280px;
	margin: 0px 10px 0px 10px;
	height:100px;
}
#innersubcontentpopular	.top {
	width:290px;
	height:28px;
	margin: 0px -10px 0px 0px;
	background:#FFFFFF url(images/sidebarcontent_top.gif) no-repeat;
}
#innersubcontentpopular	.middle {
	width:280px;
	height:100px;
	background:#FFFFFF url(images/sidebarcontent_middle.gif) repeat-y;
}
#innersubcontentpopular	.bottom {
	width:280px;
	height:8px;
	background:#FFFFFF url(images/sidebarcontent_bottom.gif) no-repeat;
}
#innersubcontentpopular h1{
	padding:0px;
	margin-bottom:5px;
	font-size:14px;
	font-weight:bold;
	color:#aaaaaa;
}
#innersubcontentpopular h2 {
	padding:5px 2px 5px 2px;
	font-size:12px;
	font-weight:bold;
	color:#aaaaaa;
}
#innersubcontentpopular p {
	padding:2px; 
	margin:0; 
	font-size:12px;
}

Hi!

I just floated left my navigation menu, and it caused my page title and breadcrumbs to move over to the immediate right of that (because it is also floated left)...

Wondering if anyone could tell me the proper way of getting it back to the left side as it was before.

Thanks.

Drew

EDIT: Here's the link, whoops! http://drewclifton.com/healthwise/?page_id=1667

I have a css menu navigation that I'm having problems with. I don't know why the menu bar is being pushed about 40px to the left. I want it to go further left. The total size of the menu bar is 960px.

Please help me out...

Thanks,

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<title>Easy Living by Lisa Marie- Professional Organization and Design</title>
 
		<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
</head>
	<body>
	<div id="wrapper">
		<div id="content">
			<div id="header">
				<img src="images/logo.jpg" alt="easy living by lisa marie- organizing your life so you can enjoy it" width="554" height="197" />
 
				<ul id="nav">
					<li id="home"><a href="index.html">Home</a></li>
					<li id="lisa"><a href="about.html">About Lisa Marie</a></li>
					<li id="services"><a href="services.html">Services</a></li>
					<li id="benefits"><a href="benefits.html">Benefits</a></li>
					<li id="testimonials"><a href="testimonials.html">Testimonials</a></li>
					<li id="contact"><a href="contact.php">Contact</a></li>
				</ul><!--end of nav-->
 
			</div><!--end of header-->
 
			<div id="slideshow">
				<img src="images/slide1.jpg" alt="" class="active" />
				<img src="images/slide2.jpg" alt="" />
				<img src="images/slide3.jpg" alt="" />
				<img src="images/slide4.jpg" alt="" />
				<img src="images/slide5.jpg" alt="" />
				<img src="images/slide6.jpg" alt="" />
			</div><!--end of slideshow-->
	</div><!--end of content-->
	</div><!--end of wrapper-->
	</body>
 
</html>

Here is the CSS styling...

Code:

body {
	background-image: url(../images/background.jpg);
	margin: auto;
	}
 
#wrapper {
	width: 1054px;
	background-color: #ffffff;
	color: #000000;
	border: 1px white;
	margin-left: auto;
	margin-right: auto;
	margin-top: 30px;
	margin-bottom: 30px;
	padding-bottom: 20px;	
	}
 
h1 {
	font-family:"Apple Chancery", Serif;
	font-weight: normal;
	font-size: 32px;
	text-align: left;
	color: #60b6d7;
	}
 
h2 {
	font-family:"Apple Chancery", Serif;
	font-weight: normal;
	font-size: 26px;
	text-align: center;
	color: white;
	}
 
h3 {
	font-family:"Apple Chancery", Serif;
	font-weight: normal;
	font-size: 28px;
	text-align: left;
	color: #60b6d7;
	}
 
h4 {
	font-family:"Apple Chancery", Serif;
	font-weight: normal;
	font-size: 20px;
	text-align: left;
	color: #000000;
	}	
 
#header {
	text-align: center;
	}
 
#nav {
	height: 50px;
	width: 960px;
	background-color: #60b6d7;
	margin: auto;
	list-style: none;
	display: block;
	overflow: hidden;
}
 
#nav li {
	margin-top: 10px;
	float: left;
	width: 160px;
	}
 
#nav li a:link {
	color: white;
	font-family: "Apple Chancery", Serif;
	font-size: 25px;
	text-decoration: none;
	height: 50px;
}
 
#nav li a:hover {
	color: black;
	font-family: "Apple Chancery", Serif;
	font-size: 25px;
	text-decoration: none;	
	height: 50px;
}
 
#nav li a:visited {
	color: black;
	font-family: "Apple Chancery", Serif;
	font-size: 25px;
	height: 50px;
}

I've attached a *.gif picture of how my site looks. It is completely coded in CSS. The footer just lies underneath the content, and I want to be able to move the footer to the bottom of the page. Below the sidebar.

Does anybody know how to do this?

Any help would be appreciated. Thank you!

hi i go problem the pictures keeps moving towards right is there way to fix these? the movie pictures so they stay all on left side forever.

Hi.

I have recently 'finished' my website, currently at http://www.aslo50.dsl.pipex.com

I have positioned the images of the album cover absolutely (http://www.aslo50.dsl.pipex.com/music.htm) but they are jumping about when the browser window is resized. They are also overlapped on browser windows with different screen resolutions.

The Navigation Buttons are also stacking and overlapping in this manner although they are just positioned in flow.

I would be really grateful for any help you can offer.

Thanks

This was formerly another post. Making progress and almost there.

I have a website under develepoment...

My site

I have 4 problems.

1. and most important in IE but not in FF the bgimage is showing through the margin or padding, im not sure which of the last image being displayed.. How do I get that out of there. Comes across as a red line after my top gutter.

2. The banner image and gutter images seem to move over to the right by 1px in both browsers.

3. How do i get the left container div to go all the way down the page.

4. How do i get the secondary navigation in the footer to align with the centercontent div and the rightcontent div but not the left content div.

any help would be appreciated...

I have a php application that requires the applicant to input information on their spouse. If they claim to be single the fields for spouse dissapear using javascript to make a <div> surrounding the fields "hide".

This leaves a blank gap on the applicaton where the fields use to display. How would I go about moving the questions below it on top of the hidden spouse fields?


here is the current javascript I am using to accomomplish this. It uses a php loop to display the questions for X amount of owners.
Code:

<?

echo "<script language=javascript type='text/javascript'>";

for($i=1; $i <= $_SESSION['principal']['numOwners']; $i++)
{

  echo "
  
  function hidediv".$i."() 
  { 
    if (document.getElementById) 
    { // DOM3 = IE5, NS6 
      document.getElementById('hideShow".$i."').style.visibility = 'hidden'; 
    } 
    else 
    { 
      if (document.layers) 
      { 
        // Netscape 4 
        document.hideShow".$i.".visibility = 'hidden'; 
      } 
      else 
      { 
        // IE 4 
        document.all.hideShow".$i.".style.visibility = 'hidden'; 
      } 
    } 
  } 
  
  
  function showdiv".$i."() 
  { 
    if (document.getElementById) 
    { 
      // DOM3 = IE5, NS6 
      document.getElementById('hideShow".$i."').style.visibility = 'visible'; 
    } 
    else 
    { 
      if (document.layers) 
      { 
        // Netscape 4 
        document.hideShow".$i.".visibility = 'visible'; 
      } 
      else 
      { 
        // IE 4 
        document.all.hideShow".$i.".style.visibility = 'visible'; 
      } 
    } 
  } ";

}

echo "</script>";

ok basically this is an accessibility thing, i dont want users (disabled) to read the links first page after page and i have read that i can place the links at the bottom but style them with css so they appear on top.

i am trying to do something like this but my page just gets messed up if i move the links to below.
page layout:
Code:

<div> //overall
   <div>//top>
   <div>side Links/menu
   <div>contents
   <div>footer