|
CSS - Validated Footer Crashes Safari And Input Fld Placement Error In Ff
This afternoon I could finaly continue working of a menu bar.
First I did use Table's but after reading a CSS guide ( E. Meyer ), I could change that with a ul/li and CSS. I have floating on the left side: / spacer / two icons / spacer / ... / set of centered links / ... / and floating on the right side / spacer / form fields / Here my CSS Code:
#footer {
clear: both;
padding: 2px 0px 10px 0px;
font: 11px arial, helvetica, sans-serif;
width: 100%;
overflow: auto;
text-align: center;
border: 1px solid;
/*min-height: 23px;
max-height: 32px;*/
position: absolute;
bottom: 0px;
left: 0px;
height: 25px;
}
#footer li.img {
padding-left: 4px;
padding-right: 4px;
float: left;
}
#footer li.spacer {
min-width: 6px;
float: left;
}
#footer li#spacerLeft {
margin-left: 8px;
float: left;
border-left: 2px #ddd dotted;
}
#footer li#spacerRight {
border-right: 2px #ddd dotted;
margin-right: 8px;
float: right;
}
#footer li#txtSelector {
margin-right: 10px;
float: right;
}
#footer a {
clear: both; margin: 0 0 ; height: auto;
}
#footer ul {
text-align: center; margin: 0 0 ; padding: 0; list-style-type: none;
}
#footer li {
padding-left: 3px;
padding-right: 3px;
display: inline;
min-height: 23px;
width: auto;
}
#footer input {
font-family: Verdana; color: #333333; font-size: 7pt;
width: 80px;
}
This with my HTML Code: <div id="menu_container"> <div id="footer"> <ul> <!-- spacer --> <li class="spacer"> <!-- icons --> <li class="img"><img src="comment.gif"> <li class="img"><img src="feedicon.gif"> <li id="spacerLeft" class="spacer"> <!-- links --> <li class="link"><a href="/">Inline test</a> <li class="link"><a href="/">home</a> <li class="link"><a href="/">web</a> <li class="link"><a href="/">Simple more links</a> <li class="link"><a href="/">Simple, even more links</a> <!-- input search field --> <li id="txtSelector"> <form action="search.php" method="post"> <input type="text" name="search" value="Search Here" size="20" >; </form> <!-- spacer --> <li id="spacerRight" class="spacer"> </ul> </div><!-- footer --> </div><!-- footer container --> I am close, with what I want. But If I use this in Safari, it crashes when I make my window small. On FireFox the input field is not in line with the other items. If I the window is to small to show them all, I would love to have the middle li items wraps under them selfs. like: link link link link one two three four and not link one link two link three link four This did work in my table test, but not here. I did have it one time, but I think it was by accident. Does someone have any clue? Thanks Similar TutorialsHello, My home page works fine on all browsers and platforms except safari. http://www.caillouette.com/EoLtest/ The two buttons below the main nav should be above the big blue "Request Information" button. Can anyone help? thanks -S Hello nice people. I'm new and excited to be here. My footer that is supposed to be placed at the bottom of my content and sidebar is placing it self about 600px or so below instead, causing a ridiculously long scroll down with a huge empty space in between the posts and the footer. Just looks awful. I can't figure out what's 'causing the problem. How do I fix this? I think the problem lies in these set of CSS, but I could be wrong... My blog is: thetissuetalk (at) blogspot (dot) com Code: /* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width:1000px;
margin:0px auto 0px;
padding:8px;
text-align:left;
}
#content-wrapper {
width: 1000px;
}
#main-wrapper {
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
margin:30px 250px auto 115px; padding:0 120px 0 0;
}
#sidebar-wrapper {
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
position:relative; top:-6600px; right:40px; padding:20px 20px 0px 5px; width:220px; color:#333; background:#F0F0F0; font:normal 12px/14px "Trebuchet MS","Lucida Grande","Lucida Sans Unicode",Arial;
}
#menu { width:167px; margin:0px 0 40px 30px; padding:0; text-align:center; }
#menu ul { padding:0; margin:0; }
#menu li { font:bold 12px/14px Arial,Helvetica,"Trebuchet MS"; letter-spacing:2px; list-style:none; margin:-3px 0; padding:5px 0; }
#menu li a, #menu li a:visited { display:block; color:#FAFAFA; background:#D0D0D0; text-shadow:0 0 4px #FAFAFA; margin:0 2px 0 1px; padding:5px 5px 4px 5px; border:0; text-decoration:none; text-transform:uppercase; -moz-border-radius:8px; -khtml-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; }
#menu li a:hover { color:#fff; background:#C5C5C5; text-shadow:0 0 3px #B5B5B5; }
#menu .current_page_item a, #menu .current_page_item a:visited { color:#fff; background:#C5C5C5; text-shadow:0 0 3px #B5B5B5; }
#menu ul ul li { margin:3px 2px 0 10px; padding:0; line-height:11px; }
#menu .rss a, #menu .rss a:visited { color:#B3B3B3; background:#ddd url(http://2.bp.blogspot.com/_k_DnmK4oz2Q/S1u4oxWZhnI/AAAAAAAAAkQ/rkns3Lq9mC8/s1600/rss.png) no-repeat 37px center; text-shadow:0 0 0; padding-left:20px; }
#menu .rss a:hover { color:#A9A9A9; background:#E7E7E7 url(http://2.bp.blogspot.com/_k_DnmK4oz2Q/S1u4oxWZhnI/AAAAAAAAAkQ/rkns3Lq9mC8/s1600/rss.png) no-repeat 37px center; text-shadow:0 0 0; }
Thanks! Ok I've got this... Code:
<html>
<head>
<style type="text/css">
body {
height: 100%;
background-color: blue;
margin: 0px;
padding: 0px;
}
.container {
height: 100%;
width: 300px;
margin: 90px auto 50px auto;
background-color: green;
}
.footer {
position: absolute;
bottom: 0%;
width: 100%;
background-color: yellow;
height: 50px;
}
.menubar {
position: absolute;
top: 0px;
width: 100%;
background-color: red;
height: 95px;
}
</style>
</head>
<body>
<div class="menubar">
MENUBAR
</div>
<div class="container">
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
a<br>a<br>a<br>a<br>a<br>a<br>z<br>
<!-- footer -->
<div class="footer">
FOOTER
</div>
</div>
</body>
</html>
Which works beautifully in opera, the green part is the full size of the document with all those a<br> in there (or without), and the footer is perfectly placed at the bottom. But both IE (testing on version 6) & NS (testing on version 7.1) display the footer at the bottom of the window when it loads, not after the container div is finished... Also in NS the container divs background colour finishes once you scroll down a little. Now I've tried many different ways around this. I know what its like when I spend too long looking at one thing, I end up missing the obvious - so I thought I'd throw it out to a wider group for observations... I thank you in advance. -D 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>";
I'm currently attempting to make a simple template using CSS that has a fixed height header, an expandable content area beneath it and a fixed height footer that stays at the bottom of the page. The footer should move down when the content area expands further than the page height - I don't want to have a scrollable div for the content area. Easy, right? The problem I'm having is that I need to define 'overflow:auto' within the content div in order for it to be able to expand further than the initial 100% when necessary, but the inclusion of this property causes the footer to disappear without a trace in Safari. It works correctly in Firefox however. Below is the CSS stylesheet and the HTML from the template file. Any ideas what I can do to fix this problem? Thanks. Code:
html, body {
background-color: #efefef;
height: 100%;
margin: 0;
}
#container {
height:100%;
min-height:100%;
width: 790px;
padding: 0 5px;
margin-right: auto;
margin-left: auto;
margin: 0 auto -20px;
background-color: #fff;
overflow: auto;
}
#container .header {
float: left;
margin-top: 5px;
width: 790px;
height: 130px;
background-color: #000;
color: #fff;
}
#container .navigation {
float: left;
width: 790px;
height: 30px;
margin-top: 5px;
}
#container #content {
float: left;
margin-top: 5px;
width: 790px;
font-family: Verdana, arial;
font-size: small;
}
#spacer {
clear: both;
width: 790px;
height: 20px;
}
#footer {
height: 20px;
width: 790px;
margin-left: auto;
margin-right: auto;
background-color: #cecece;
}
Code:
<html>
<head>
<title>
{TITLE}
</title>
<link rel="stylesheet" type="text/css" href="./css/main.css" />
<link rel="stylesheet" type="text/css" href="./css/navigation.css" />
<link rel="stylesheet" type="text/css" href="./css/content.css" />
</head>
<body>
<div id='container'>
<div class='header'>
{HEADER}
</div>
<div class='navigation'>
{NAVIGATION}
</div>
<div id='content'>
{CONTENT}
</div>
<div id='spacer'></div>
</div>
<div id='footer'>
{FOOTER}
</div>
</body>
</html>
http://www.pearl.ru/isdunyasi/vnewsall.asp Everything appears right with Firefox and Safari. Footer floats right with IE. Can anyone tell why. Thanks. When using Safari, whenever you click inside an input field, a highlight goes around the field (focus ring). Is there anyway to use CSS to remove the focus ring altogether? I am using the following code to create a custom input field: Code:
input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus { outline: 0 none; }
This essentially removes the border from the input field however this does not work in Safari on a Mac (works fine in Safari on Windows). Any one know how to fix this? heys all, so im trying to get rid of that input:focus blue 'border' or 'outline' that happens in safari browsers. determined that if you apply a opacity: 0.99 to only the safari browsers, then it won't do that. however, this is only a fix for safari MAC. any thoughts on safari PC? thanks. Hey as the topic title says, can I put a background-image on a text input so that it shows in safari? I can't figure it out and can't find anything using google. Anyone have any experience with this? Thanks could anyone with safari go to: http://www.mmimageart.com/fineart.html http://www.mmimageart.com/fineart2.html http://www.mmimageart.com/fineart3.html and tell me if you see any errors, specially the text under the thumbnails getting out of place? or does everything looks normal to you ? thanks. Hi, I've spent quite a while getting this layout right - http://www.stonemartin.co.uk/dev/ho...ut/dhtest3.html - it works in IE6 (windows), Firefox (Mac and PC) and Safari. The code validates for HTML and CSS - but when I try it on IE 5.2 under mac OSX the application hangs. Any ideas? Many thanks Lar In a nutshell, I want the following page: http://kznf.com/test/example.html to display in IE7 how it does in FF3 and Safari 3.1 The only "solution" I've been able to come up with is to enforce a width on some wrapping div. The problem is that sometimes I want it to have a wider width, as seen in example2 http://kznf.com/test/example2.html Am I doing something wrong? Is there some ridiculous IE7 only solution out there somewhere? I've googled and searched forums and I'm about to give up and go back to table based layout! Someone help! 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" xml:lang="en" lang="en">
<head>
<title>fieldset Test</title>
<style type="text/css">
.floatleft1
{
width: 100px;
height: 100px;
background-color: green;
border: 1px solid #000;
float: left;
clear: left;
}
.floatleft2
{
width: 100px;
height: 100px;
background-color: red;
border: 1px solid #000;
float: left;
}
.previousLine
{
float:left;
clear:none;
}
</style>
</head>
<body>
<div class="floatleft1">apple</div>
<div class="floatleft2">red</div>
<div class="floatleft1">banana</div>
<div class="floatleft2">yellow</div>
<div class="floatleft1 previousLine">really?</div>
<div class="floatleft2">yes</div>
<div class="floatleft1">plum</div>
<div class="floatleft2">purple</div>
</body>
</html>
Anyone come across this...? Put a minus margin as part of a class and it'll display & print OK in IE. Displays fine in Firefox but craches the browser when you try to print. I tried to isolate the code with the minus margins but it works fine on its own (see below). So it appears to be conflicting with something else on a more complex page. Sound familiar to anyone? Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
body {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: small;
color: #666666;
}
p{
margin:0px;
padding: 0px 0px 0.7em 0px;
}
.play {
position:relative;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: x-small;
color: #666666;
margin-left: 0px;
padding-left:75px;
}
.character {
position:relative;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight:bold;
font-size: xx-small;
color: #666666;
width:70px;
float:left;
margin-left:-75px;
}
</style>
</head>
<body>
<div class="play">
<p><span class="character">Char1</span> Some line in a play.</p>
<p><span class="character">Char2</span> Some other line in a play.</p>
<p>That carries on for a bit.</p>
<p><span class="character">Char1</span> The first person again.</p>
</div>
</body>
</html>
I'm having trouble with my website structure... view this page for an example... css is here... The Footer (which currently consists just of the validation images) is suppossed to be at the bottom of the page... It works in IE except there is a little line between the images (it is also part of the link...), and it doesn't work at all in FF... how do I get rid of the line in IE, and what do I need to add or change in my css to get it to be viewed properly in FF? Thanks Bryan Hi there. I'm working on a page, and I'm a bit confused about how to place my CSS on it. The page has a nutritional search box that will be the primary focus of the entire site. Right now I have only a front page. So currently I have one external CSS file with the CSS for the page layout, along with the CSS to arrange the search box. But now I want to bring up a javascript popup with just the searchbox and another table. I can't use my original external CSS because I don't want the main page naviagation in the popup, nor do I want to copy the CSS for the search box everywhere. What is the correct way to do this? I almost want two external css files. I want to include BOTH files in the main page, and only the file associated with the search box in the popup. But in the reading I've been doing it doesn't seem possible. Even when I try copying the CSS for the search box, Firefox doesn't seem to like me attaching a different CSS file in the popup then I had in the main page. Please help! Or at least point me to a useful article. Thank you! Below is my html in which I want to embed "legend" 30px to the right of "map". After much playing with the code, I need help. "legend" is pushed underneath "map" in this version. Other arrangments have also failed. If I get rid of the "border" and "leg" div tags, they are placed side by side, but I have littile control over where "legend" is placed. Any insight would be appreciated. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <head> <title>CSS</title> <style type="text/css"> #page {position:absolute;border: 1px solid black;left: 20px;top: 20px;padding-top: 25px;padding-left: 25px;padding-right: 25px;padding-bottom: 25px} #printArea {position:relative;border: 1px dotted black;padding-right: 5px;padding-top: 5px;padding-left: 5px;padding-bottom: 110px} #leg{position:relative;border:1px solid black;width:170px;top:0px;right:0px} .map {position:relative;border:1px solid black} .legend {position:relative;top:0px;left:880:0px} </style> </head> <body> <div id="page"> <div id="printArea"> <div id="border"> <embed class="map" id="map" src="index.svg" width="850px" height="675px" type="image/svg+xml"/> </div> <div id="leg"> <embed class="legend" id="legend" src="legend/legend.svg" width="170px" height="625px" type="image/svg+xml"/> </div> </div> </div> </body> </html> Hi there, I'm having a FF/IE problem! As usual. I have a site up (www.silk-works.com)which thanks to BonRouge and Dan_A has a footer that sits in the correct position, ta peeps. The problem I have now is that - www.silk-works.com/jane/jane.html - I have Images floated right and I want text to appear alongside - which FF handles fine, but IE bumps below the first Image.. Code:
<img src="../photographs/jane01.jpg" alt="" id="containerImageRight"/>
<img src="../photographs/jane03.jpg" alt="" id="containerImageRight"/>
<p>some ample text....</p>
[CODE]
CSS for image placement is;
[CODE]#divWrapper #divContainer #containerImageRight {
margin: 0px 10px 10px 10px;
float: right;
border: 2px solid #6E6447;
padding: 0px;
}
CSS for <p> tag is; Code: #divWrapper #divContainer p {
font-family: "Gill Sans MT", Tahoma, Verdana, Arial, sans-serif;
font-size: 1.1em;
padding-left: 10px;
letter-spacing: 0.05em;
line-height: 1.3em;
padding-right: 10px;
color: #6E6447;
}
Any suggestions greeted with a free ice cream. Regards, James. I'm sure this is some basic thing that's just slipped my mind. http://www.onlineeditions.com/opportunityhouse/ As you can see, it's rendered differently between FF and IE: the content column on the right has a few nested divs to hold background images, but on FF (And Safari) the "right" div seems to have slipped down and to the left a few pixels. Code and css is all valid, per w3c. If someone can help me find what's gone wrong here, I'd be most thankful. |
|||||||