|
CSS - Ff/ie Form Overflow And Cms Vs Static
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? Similar TutorialsMy CSS works in IE and Mozilla but not Netscape or Opera I have a 2 column website, built with 2 relative position DIVs, with overflow set to auto. Because of this, I turned off overflow on the body tag and on the html tag (overflow: hidden;). I didn't want to have 2 scroll bars on the right side of the window. When I first tested this on 4 browsers, IE, Mozilla, Netscape and Opera, it worked great, only having one scroll bar on the right side of the window when the page was longer than the window height. But when I moved to a new host server recently, I discovered that Netscape and Opera stopped working. They now simply give me blank screens. When I remove the "overflow: hidden;" specifications from the body tag and the HTML tag in my CSS file, Netscape and Opera once again display my web pages. However, now I get 2 scrollbars on the right side of all 4 browsers (in IE, the second scrollbar isn't actually there, but the space holder for the scrollbar is there). Is there a cross browser way for doing what I'm trying to do? Or am I faced with detecting the browser type on the server-side, and setting the style sheet appropriately? Here are the related parts of my CSS: /* CSS styles */ BODY { font-family : Verdana, Arial, Helvetica, sans-serif ; font-size : 10pt; background : Black; color : White; margin: 0; padding: 0; border-width: 0; overflow: hidden; } HTML { overflow: hidden; } #LeftNavDIV { position:relative; width:185px; height:100%; float:left; padding:2px 0px 0px 0px; margin:0px 0px 0px 0px; border:1px solid white; overflow:auto; } #ContentDIV { position:relative; height:100%; width:75%; float:right; padding:0px 0px 0px 0px; margin:0px 0px 0px 0px; border:0px dashed #336699; overflow:auto; } Hi, A simple question ... i'm sure i've done something like this before but can't remember how ... I centered a web page in the browser and used divs to hold the text and main content for the page - but when the page is viewed at different resolutions or left-side panels are opened (such as media player in IE) my div layers are not repositioning with the page ... I know this must be easy but it aint workin somehow ... thanks in advance ... Hello, I have a problem with a footer on a website I'm building. I want it to my down as text fills the space between the top blue thing, and the bottom blue thing, but as you can see, the text skip past the bottom. I want the bottom to be pushed down by the text. Here's the site And here's the css Hope you can help me with this. Hi, I have a header, body and footer. I need the body to bee 550px tall regardless of the content. Then, the footer will be below this. Here's the CSS for the maincontant: Code: ..oneColFixCtr #mainContent {
position:absolute;
padding: 0, 10px, 0, 10px;/* remember that padding is the space inside the div box and margin is the space outside the div box */
overflow:auto;
height:500px;
width:768px;
background-color:#FFFFFF;
}{
How can I make the container 500 px tall no matter what the content is? As you can see he http://www.caillouette.com/SelvanSite3/BaselineFees.php The page changes height according to the content. I don't want this. I want the height to be static 500px. Thanks - I have a problem with my CSS. The intention was to get a static bar at the top of the page which stayed in place as the page was scrolled. That bit works fine. The problem is that the text in the main part of the page scrolls under the static bar. This means when you use any in page links ( to an anchor) the page scrolls so that the relevant part of the page is under the header div. Any ideas on how I can fix this ? The HTML is up at : http://www.benbun.co.uk/test/test.htm Any help would be appreciated. BBBS 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 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. 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? 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? this is the code i'm having problems with: Code:
<style type="text/css">
body {
font: normal 10px Verdana, Arial, Helvetica, sans-serif;
color:#666;
margin : 0;
padding : 0;
}
/* text */
h1 {
font: bold 10px Verdana, Arial, Helvetica, sans-serif;
line-height:30px;
}
/* div classes */
div.row {
position:relative;
left:10px;
width:326px;
height:20px;
z-index:1;
margin-bottom:8px;
text-align:right;
}
div.cell_title, div.cell_content {
position:absolute;
top:0px;
float:left;
padding:0px 0px 0px 8px;
border:1px solid #E4E4E4;
text-align:left;
line-height:17px;
}
div.cell_title {
background-color: #E4E4E4;
left:0px;
width:100px;
z-index:2;
}
div.cell_content {
background-color:#FCFCFC;
left:100px;
width:224px;
z-index:3;
}
/* form elements */
.input {
font: normal 10px Verdana, Arial, Helvetica, sans-serif;
color:#666;
background-color: #FCFCFC;
height:15px;
width:213px;
border:0;
}
.textarea {
font: normal 10px Verdana, Arial, Helvetica, sans-serif;
color:#666;
background-color: #FCFCFC;
height:100px;
width:213px;
border:0;
overflow:auto;
}
</style>
<h1>Contact</h1>
<form action="?menu=contact" method="post" name="contact">
<div class="row">
<div class="cell_title"><label for="name">name:</label></div>
<div class="cell_content"><input type="text" class="input" name="name" id="name"/></div>
</div>
<div class="row">
<div class="cell_title"><label for="email">email:</label></div>
<div class="cell_content"><input type="text" class="input" name="email" id="email" /></div>
</div>
<div class="row">
<div class="cell_title"><label for="message">message:</label></div>
<div class="cell_content"><textarea class="textarea" name="message" id="message"></textarea></div>
</div>
<div class="row">
<input type="image" src="includes/images/btn_add.gif" name="Submit" value="Submit">
</div>
</form>
My problem is that my "row" div's overlay if their content is larger. Because of that i cannot see the send button from my form (the textarea height is bigger that the height of the "row" div - i need the layer to expland according to the content, but i don't want it to overlay on what is after it!). I hope that you understood my problem and could help my with it. Thanks in advance! what i'm trying to accomplish is two boxes next to each other inside a div, which i can scroll horizontally to see the two boxes. if you copy the code below it works correctly, only because the width of the parent div is set. Code:
<style type="text/css">
#container {
overflow:scroll;
width:100px;
}
#parent {
overflow:hidden;
width:400px;
}
.box1 {
border:1px solid black;
float: left;
height: 101px;
width: 101px;
}
</style>
<div id='container'>
<div id='parent'>
<div class='box1'></div>
<div class='box1'></div>
</div>
</div>
if i change width:900px in the parent div to width:auto then the boxes go underneath one another. That's the problem, the parent div should auto adjust to the width of both boxes. i'd really appreciate solving this. i can't have a fixed width on the parent div it should auto adjust and both boxes should be next to each other. My page looks decent in Firefox but in IE the overflow property doesn't seem to be working. Perhaps you can give me some pointers as to which tags may be messing up the display in Internet Explorer. The link to the page in question. http://www.paulvincentgandolfi.com/blog/?page_id=123 Thanks Hi all, I'm working on the site http://boolarongpress.com.au and have hit a problem. In IE7 if you click into either the title or author search fields in the left hand nav menu the cpu usage maxes out and IE7 hangs. There is no javascript attached to these inputs. The problem seems to be caused by a line in the css, overflow: auto; This is set for the content div so that it scrolls as if it were a frame. If I remove this line from the css the problem dissappears but of course the content div no longer scrolls. Has anyone got any ideas on how I can fix/work around this issue? Cheers, Peter How do I make the DIV overflow in the below codes? It works in IE but not firefox. <html > <head> <style type="text/css"> html, body { height : 100%; } </style> </head> <body> <table style="height : 100%; width : 100%"> <tr style="height : 64px; background-color : Blue;"> <td></td> </tr> <tr style="height : auto; background-color : red;"> <td> <!-- THIS IS THE PROBLEM --> <div style="height :auto; overflow-y : scroll"> <!-- THIS IS THE PROBLEM --> asd<br /> asd<br /> asd<br /> asd<br /> asd<br /> asd<br /> asd<br /> asd<br /> asd<br /> asd<br /> asd<br /> asd<br /> asd<br /> asd<br /> asd<br /> asd<br /> asd<br /> asd<br /> asd<br /> asd<br /> asd<br /> asd<br /> asd<br /> asd<br /> asd<br /> asd<br /> asd<br /> asd<br /> asd<br /> asd<br /> </div> </td> </tr> <tr style="height : 64px; background-color : Blue;"> <td></td> </tr> </table> </body> </html> hi, I have 3 DIV's, The first div is like a menu header DIV and the second DIV is the menu links and the third DIV has some information I want to click on the first DIV then show the second DIV like a menu problem is the third DIV moves down.. How can i let the second DIV overflow over the third DIV without it moving down? Thanks While working on my site, I am testing it in Mozilla Firefox 1.0pr and IE 6. In my code: body, td, iframe, table, div, tr { font-variant: small-caps; margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #ffffff; background-color: #666666; scrollbar-3dlight-color: #666666; scrollbar-arrow-color: #666666; scrollbar-base-color: #666666; scrollbar-darkshadow-color: #666666; scrollbar-face-color: #666666; scrollbar-highlight-color: #666666; scrollbar-shadow-color: #666666; } a:link { color: #ffffff; text-decoration: none; } a:visited { text-decoration: none; color: #ffffff; } a:hover { text-decoration: none; color: #ff0000; } a:active { text-decoration: none; color: #ffffff; } select, option, textarea, input { border: #ffffff 1px solid; font-size: 11px; font-variation: normal; font-family: Verdana; background-color: #666666; } I would add "overflow: auto;" right under 'body, td, iframe, table, div, tr {' so that in Mozilla the scrollbars would not show up. However, when I load it in IE, the windows do not scroll at all. Is there a quick-fix for this, or what can I do so it will work properly in both browsers? |
|||||||