CSS - Css Problems With Static Header Bar

This problem has been sucking the life out of me for the last several hours.

I'm developing a website with a CMS behind it. I have a page with a form on it that looks fine in FF, but seems to have an overflow problem in IE 6.

But, what makes this even more strange is when I take the generated code and view it as a standalone HTML webpage with the same CSS behind it, it looks fine in IE!

I'm reluctant to post the site of what will eventually be the live site because I don't want Google to find it, but like I said, I'm at the end of my rope! Here is the page of the site that does NOT work in IE (gets cut off right when the form is supposed to appear).

http://westport.dreamhosters.com/modules/news/comment.php?id=4

And here is that page saved as a static HTML file with the same CSS file behind it:

http://www.jimandkris.com/test/

In the static version, the form displays in its entirety in IE6.

So, could someone confirm what I'm seeing? And even better, can anyone suggest anything?

Dear All,

I have a question -

Background : I used the E-book "designing without tables" and created a page with 2 columns. A 200 px column on the left for the links and the rest on the right for the data.

There is also a header column on the top with has main menu.

Question 1 : If there are 5 links on the left column, how can I link the pages such that when I click on a link on the left column..only the right column should refresh. Meaning, I want the left column to be static with the links and only the right column should be refreshed? Is it possible to do so using only CSS and HTML ?

Thanks in advance. Regards.

I am not an expert on developing websites, but I've been able to get our site up and running without much challenge. I used a menu I found on www.dynamicdrive.com that allowed you to have our menu in a horizontal or verticle layout.

We don't use frames in our site but we wanted a frames-type look. So we use the menu in the vertical layout. What I'd like to do is find a way to keep the menu on the screen as people scroll down. I've seen other websites do this and have looked at a couple that were recommended from a previous post, but I can't figure out how to make it work propertly.

Our website is www.indyartistgroup.com. If someone could take a look at the site and suggest some ideas on how to make the menu on the left hand side stay on screen no matter how low you scroll I would appreciate it. I'm out of options at this point.

Thanks for the help.
John

Hi. I have an image that I want to be a background in a webpage. What I want to do is have that background fill up the rest of the page but remain static on the page while the content scrolls (if need by, y'know, varies depending on the resolution of the users monitor). How can I accomplish this?

A random thought popped into my head today about whether it matters if a site is fluid or static with regards to accessibility. Wherever possible I do try to design fluid sites but is there anything wrong with a static design if you then add an extra CSS file for handheld devices etc?

Hi there,

I have an HTML/CSS design I'm working on, that can be accessed he

http://www.design-portal.co.uk/demo/

The CSS can be found he

http://www.design-portal.co.uk/demo/style.css

Basically what I would like is this:

I want another static area that always appears at the bottom of the page underneath the main content text. As I've fixed the big box thing's height (it's going to appear the same height on every page) I want the user to be able to scroll to the next page if the text is too long to fit on the one page. I've created a screenshot as an example:

http://www.design-portal.co.uk/demo/images/demo.jpg

As you can see, the text at the bottom allows the user to scroll forwards and backwards. I can do this, but it never appears at the bottom; always just underneath the text above it depending on how much text is in the place. How can I just get the damn thing to stay at the bottom regardless of how much content is above it?

Cheers in advance,

Dave

hello. i have a button that pops up to a floating div. this div gets applied html from a source called by ajax. in the html that is being called, i added <style></style> tags to embed specific css for that html. i do this because this html will be used globally across the site

it works fine in every browser except safari. safari doesn't seem to render the css. any suggestions?

Hi all,

I need some help. I have implemented a fixed header on my site, but certain content is scrolling above the header while other is scrolling behind. I would like it all to scroll behind the fixed div's.

I am developing a web site, panopticinsight dot com. The header/banner looks fine in Firefox. In IE7 and Opera, the H2 subtitle is left aligned over the globe image. In IE6 content jumps outside of container.

Anyone know why there is a shift, and what I can do about it?



Style sheet code pasted below:

Code:

body {
width:800px;
font:0.83em/1.4em Tahoma, Geneva, sans-serif;
color:#CBD4E3; 
background:#000 url(images/body_bg.gif) repeat-y top center;
letter-spacing:1px;
margin:0 auto;
}

h1,h2,h3,h4,h5,h6 {
font-family:"Times New Roman", Times, serif;
font-style:italic;
font-weight:bold;
color:#e9df55;
background-color:#000;
}

h2 {
font-size:2em;
}

h3 {
font-size:1.5em;
}

h4 {
font-size:1.25em;
}





a:link {
color:#8090AC;
text-decoration:none;
}

a:visited {
color:#B17F6C;
text-decoration:none;
}

a:hover {
color:#E9DF55;
text-decoration:underline;
}

a:active {
color:#E9DF55;
text-decoration:none;
}
#container {
width:760px;
margin:0 auto;
}

#header {
height:200px;
width:760px;
margin:0;
padding:0;
}

#banner {
height:100%;
width:100%;
color:#cbd4e3;
background:#000 url(images/header_bg.jpg) no-repeat top left;
margin:0 auto;
padding:0;
}
#banner h1 {
font-size:400%;
color:#CBD4E3;
background-color:transparent;
float:left;
display:inline;
margin:0;
padding:70px 0 70px 280px;
}
#banner h2 {
	font-size: 12pt;
	color: #e9df55;
	background-color:transparent;
	text-indent: 200pt;
	vertical-align: text-bottom;
}
navigate{
	color : #105BAC;
	background-color : transparent;
	height : 20px;
	font-size: 100%;
	border-top : 1px solid #999999;
}

#navigate ul {
	list-style-type: none;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 150px;
	margin-right: 0px;
	padding: 2px 0 0 0;
}
#navigate ul li {
	display: inline;
}
td {
	font-family: Arial, Helvetica, sans-serif;
}

th {
	font-family: Arial, Helvetica, sans-serif;
}
p {
	font-size: 14px;
	color: #FFFFFF;
	left: 50px;
	right: 50px;
}



#main {
	width: 660px;
	padding-right: 50px;
	padding-left: 50px;
}
#footer {
	font-family: "Times New Roman", Times, serif;
	font-size: 9px;
	color: #666666;
	height: 100px;
	width: 760px;
	vertical-align: text-bottom;
	text-align: center;
	
}

#SplashImage {
	float: left;
}
.image-left {
	clear: none;
	margin-bottom: 10px;
	float: left;
	margin-right: 20px;
	margin-left: 10px;
}
.image-right {
	clear: none;
	margin-bottom: 10px;
	margin-left: 10px;
	float: right;
}

So I have a design where the background is a large (1400x1100) image that fades into a vertical gradient at the edges.

I've set up the css as follows:

body {
background: #000 url(gradient.jpg) repeat-x;
margin: 0;
}

Here's where I run into my problem...

I've created an empty DIV to hold the large image which will appear on top of the gradient and positioned it absolutely.

<div id="bg_image"></div>

#bg_image {
width: 100%;
height: 1100px;
background: url(images/bg_image.jpg) no-repeat top center;
margin: 0;
position:absolute;
}

This works and the background looks like it should, however because the large image is inside a DIV, any time the browser window is smaller than that div (which will be the case for most users considering the image size) there will be scrollbars.

This makes perfect sense of course I just can't come up with an alternative.

If there was a way to extend a background image beyond the borders of a DIV that would work but overflow:visible; doesn't seem to work with background images only content.

I wish I could set a repeating background AND a static background in the body style, because that is exactly the effect I'm trying to achieve.

Any suggestions would be greatly appreciated!

Thanks,
Josh

I'm currenty working on a website, and header is really starting to get on my nerves. If you go to http://www.techtalk.l2p.net/tab/index.php you can see what I have done so far. Well, I have a few problems.
When trying to log in, and you press tab to go from Username to Password, it goes to the Login link instead. After filling in the Password field, and you press Enter, nothing happens. When the browser is resized, the whole header gets messed up. I was thinking some CSS could help it work, but I have no idea where to start. Any help would be appreciated.

Hello, my name is Jordan, and I run breatheheavy (can't post the URL)

I have a new header designed that's 1665x515px. I am having a little trouble putting it on the website because of the current restrictions placed in Wordpress on the header.php and style.css files. When I uploaded the header and changed the settings in Wordpress, it didn't look correct on all browsers or the iPad. I was hoping to get some help from someone that could help me with this and make it compatible with all browsers / mobile version.

You can see the site on an ipad simulator site (also can't post the link)

Thanks for reading

Sending good vibes your way,

Jordan

what in gods name am I doing wrong?
I want the header image to scale with the web page, I can't stand how it shows the scroll bar when you resize firefox's window.

themidnighter .ca/test

Thanks!

How do i stop the <h1> add white space above and below anything in the header tag.

Hi,

I am working on a design for one of my websites and have run into a little bit of a problem. I am hoping one of you guys can help me out. I am relatively new to coding with css and have read a bunch of tutorials but cannot for the life of me figure out how to convert the following table into divs:

Code:

<table border=0 width=100%>
<tr>
<td rowspan=3>logo</td>
<td rowspan=3>navigation bar</td>
<td>some links</td>
</tr>
<tr>
<td>search box</td>
</tr>
<tr>
<td>more links</td>
</tr>
</table>

Basically its the header part of the design, I have the rest of it done without much problems. I have tried everything but cannot get it to look like the table. Any help will be greatly appreciated.

Thanks,