Header <div> shrinking on window resize - html

I have a header that I need to fill the top of the screen. It successfully does this, but when I minimize the window and then scroll to the right, the div shrinks and no longer fills the whole top portion of the screen. I have tried setting div heights and using width:100%, but nothing seems to work. I was looking at other users who had the same problem, but I could get nothing to work.
Here is my code
<style>
A:hover {text-decoration: underline; color: white}
#top {
height:53px; width:100%; min-width: 800px;
background:#000000;
}
h400 {
color:white; border-bottom;
letter-spacing:-0.05em;
margin-top:0; padding-top:0;
font-size:1.2em;
font-family:Helvetica, Arial, sans-serif;
}
#headerimage{
margin-top:-20px;
margin-right:10px;
min-width:322px;
background:black;
}
a img {border: none; }
</style>
<?php
if ($username){
$headerdiv='<div class="box" style="width:516px; margin-top:-16px;"><div align="right">';
}
else
$headerdiv='<div class="box" style="width:220px; margin-top:-16px; margin-right:20px;"> <div align="left">';
?>
<head>
<div id="top" align='center'>
<h400><table><tr><td><div id='headerimage'><a href="http://www.pearlsquirrel.com" ><img src="pearlsquirrel.jpg"/></a></div></td><td><div style="margin-top:13px; margin- right:30px;"><form action='searchmusic.php' method='GET'>
<div style="margin-right:-5px;"><input type='text' size='45' name='search' value="Search..." style="color:#474747;" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/>
<div style="visibility:hidden;" >
<input type='submit' name='submit' value='Search' />
</div></div>
</form></div></td><td><?php echo $headerdiv; ?><?php if (!$username) echo 'Register'; ?> <?php if ($username) echo 'Upload'; ?><h11> <?php echo $echovar?><?php if ($username) echo 'Page | Logout'; ?></h11></div></div></td></tr></table>
<link rel="icon" href=".pearlsquirrelthumbnail.jpg" type="image/x-icon" />
<link rel="shortcut icon" href="pearlsquirrelthumbnail.jpg" type="image/x-icon" />
</h400><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="styles.css" type="text/css" media="all" />
</div>
</head>
If anyone could help me with this issue it would be greatly appreciated. I feel like it is an easy fix, but I really have no clue what to do.

Related

display align issues wont align correctly

why wont my write and check status buttons align horizontally with the two div's
I want the button with id writeMe to be on the direct right of the div with id test
and then i want the button statusCheck to be on the direct right of the div with id status 1 but for some reason even with display:inline it still sits directly below it
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1,
minimum-scale=1, width=device-width, height=device-height, target-
densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="cordova-2.7.0.js"></script>
<script type="text/javascript" src="js/bluetoothSerial.js"></script>
<script type="text/javascript" src="ECMA.js"></script>
<title> My LCD code </title>
</head>
<body onload="app.initialize();">
<p>Welcome to the LCD software</p>
<select id="list" onchange= "app.prints(address,list.
options[list.selectedIndex].value);">
</select>
<button id="connect" onclick="app.connect();">
Connect
</button>
<div id="address">
macAddress
</div>
<div id="status1">
Not Connected
</div>
<button id="statusCheck"> Click to check status </button>
<div id="test" >
No Message Recieved
</div>
<button id="writeMe" onclick="app.bluetoothWrite();">
write
</button>
CSS
body
{
background-color:white;
}
select {
width:200px;
margin:30px;
margin-left:0px;
}
#connect {
display:inline;
margin-left:0px;
width:200px;
}
#status1 {
border:2px solid black;
width:200px;
height:20px;
margin:30px;
margin-top:0px;
margin-left:0px;
}
#address {
display:inline;
width:200px;
height:20px;
bordrr:2px solid black;
}
#statusCheck {
display:inline;
width:200px;
margin:30px;
margin-bottom:0px;
}
#test {
width:200px;
height:20px;
border:2px solid black;
}
#writeMe {
width: 200px;
display: inline;
}
Try this HTML
<p>Welcome to the LCD software</p>
<select id="list" onchange= "app.prints(address,list.
options[list.selectedIndex].value);">
</select>
<button id="connect" onclick="app.connect();">
Connect
</button>
<div id="address">
macAddress
</div>
<div>
<span id="status1">
Not Connected
</span>
<button id="statusCheck"> Click to check status </button>
</div>
<div>
<span id="test" >
No Message Recieved
</span>
<button id="writeMe" onclick="app.bluetoothWrite();">
write
</button>
</div>
Fiddle
http://jsfiddle.net/PFVxK/1323/

Adding a doctype breaks background image alignment

Currently I have the below HTML code, as you can see there is no doctype specified:
<html lang="en">
<head>
<title>Website</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
<!--[if gt IE 7]>
<link rel="stylesheet" type="text/css" href="css/ie.css" media="screen" />
<![endif]-->
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/plugins.min.js"></script>
<link rel="icon" type="image/x-icon" href="img/favicon.ico" />
</head>
<body>
<div class="container">
<div id="searchbar">
<form action="#" method="POST">
<div class="input-append">
<input class="span2" id="appendedInputButton" type="text" />
<button class="btn" type="button">Go!</button>
</div>
</form>
</div>
</div>
</body>
</html>
Mixed with the following style.css file:
#font-face{
font-family: Comfortaa;
src: url('Comfortaa.ttf');
}
body{
background-color: #77d5fb;
background-image: url('bottom_bg.jpg');
background-position: center bottom;
background-repeat: no-repeat;
font-family: Comfortaa;
}
#searchbar{
width:700px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin:-100px 0 0 -350px;
}
Having that code shows my background image just fine however when I add the <!DOCTYPE html> as is required by bootstrap, my background image declaration seems to be "ignored" and only the specified background color is shown.
I have done some testing and found that background-position is causing the issue.
With background-position: center bottom the image will not appear however background-image: center and it will appear but centered at the top of the page and I need it at the bottom.
How can I push down that background image?
Add
html,body{min-height:100%}
to your CSS.
As for the doctype, use this
<!DOCTYPE HTML>
so your document will look somewhat like this working example. Try it and you'll see the image is displayed just the way you want it to be displayed.
<!DOCTYPE HTML>
<html>
<head>
<title>Title Here</title>
<meta charset="utf-8">
<style>
html{
min-height:100%;
}
body{
min-height:100%;
background-color: #77d5fb;
background-image: url('bottom_bg.jpg');
background-position: center bottom;
background-repeat: no-repeat;
font-family: Comfortaa;
}
#searchbar{
width:700px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin:-100px 0 0 -350px;
}
</style>
</head>
<body>
<p id="searchbar">Just testing!</p>
</body>
</html>
Enjoy!
You should always use a doctype, otherwise you will be developing in the scary and unpredictable land called quirksmode, this is nothing you want. I suggest you add:
<!DOCTYPE html>
and try to fix your minor CSS issues with that in place.

HTML Text Fields and Buttons appear bigger than specified

I am implementing UI design in one of my own projects, and it looks like I have an issue with CSS, big time.
As far as I know, I have specified styles for Input types : text, buttons in the way CSS accepts:
body input[type=text]{
border:1px solid #208278;
height:24px;
padding-left: 5px;
}
body button{
background-color: #279A8F;
border:0px;
color:white;
height:24px;
}
body input[type=password]{
border:1px solid #208278;
height:24px;
padding-left: 5px;
}
body input[type=submit], input[type=button]{
background-color: #279A8F;
border:0px;
color:white;
height:24px;
}
On the login page, the fields appear to be of 24px in height, where as after I log in, I see all the fields are bigger, with height more than 24px. I have no clue.
One point is after logging in, the fields are present in a container which has some padding, and margins, but I don't see any reason how this would affect the fields. This issue has been driving me crazy nuts, can someone please provide some insight?
The container in which the form fields are placed are below:
#container{
width:1100px;
margin: 0 auto;
}
#leftbar{
float:left;
width:200px;
font-size:13px;
background-color:#237971;
color:white;
padding:4px;
}
#rightbar{
float:right;
width:200px;
font-size: 13px;
background-color:#237971;
color:white;
padding:4px;
}
#middlebar{
padding:5px;
margin-left:3px;
margin-right:3px;
float:left;
width:660px;
border:1px solid black;
}
HTML Code of Log in page:
<html>
<head>
<link rel=stylesheet type=text/css href="<?php echo base_url('layout/layout.css');?>" media="all">
<title>
My Page
</title>
</head>
<body>
<div id=header>
Welcome
</div>
<?php echo validation_errors(); ?>
<?php echo form_open('login/verify'); ?>
<table>
<tr>
<td align="right"><label for="email">E-Mail:</label></td>
<td align="left"><input type="text" name="email" id="email" value="<?=set_value('email')?>"></td>
</tr>
<tr>
<td align="right"><label for="password">Password:</label></td>
<td align="left"><input type="password" name="password" id="password"></td>
</tr>
<tr>
<td></td>
<td align="left"><input type="submit" name="submit" value="Login"></td>
</tr>
</table>
</form>
<br/>
Sign up for a new account<br/>
</body>
</html>
HTML Code of member's area:
<!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">
<head>
<script src="<?php echo base_url('js/jquery-1.9.1.js'); ?>"></script>
<script src="<?php echo base_url('js/jquery-ui/js/jquery-ui-1.10.2.custom.js'); ?>"></script>
<link rel="stylesheet" type="text/css" href="<?php echo base_url('js/jquery-ui/css/customjqueryui/jquery-ui-1.10.2.custom.css');?>">
</script>
<link rel=stylesheet type=text/css href="<?php echo base_url('layout/layout.css');?>">
<title>Welcome</title>
</head>
<body>
<div id=container>
<div id=header>
Members area
</div>
<div id="leftbar">
<div class=content>Logout</div></div>
<div id="rightcontainer">
<div id="middlebar">
<?php echo validation_errors();?>
<?php echo form_open_multipart('home/create/validate'); ?>
<table>
<tr>
<td align="right"><label for="fullname">full Name:</label></td>
<td align="left"><input type="text" name="fullname"></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="finish" value="Finish"></td>
</tr>
</table>
</div>
<div id="rightbar"></div>
</div>
</div>
</body>
</html>
All the fields in the member's area appear bigger than 24px. :( Please help me!
Thank you very much in advance.
Figured out the main fault,
I was not standardizing the login page with the statements below in my HTML 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">

IE 8 creates Empty Text Node for img tag

When i try to add a <img> tag, IE8 automatically add a 'Empty Text Node' after the image tag.
HTML :-
<html>
<head>
<title>Railway Services</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="img/icon.png" />
<link rel="stylesheet" href="css/styles.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div id="header">
<div id="wrapper">
<div class="logo">
<img src="img/logo.png"/>
</div>
</div>
</div>
<div id="page" class="homePage">
<div id="wrapper">
<h1>Home Page</h1>
</div>
</div>
<div id="footer">
<div id="wrapper">
<p class="copyRight">Copyright©2012 Railway Services. All rights reserved</p>
</div>
</div>
</body>
</html>
styles.css :-
#CHARSET "ISO-8859-1";
body{
margin:0px;
padding:0px;
font-size:12px;
color:#123456;
font-family:verdana,_sans,arial;
text-align:center;
}
#wrapper{
width:98%;
margin:0 auto;
}
#page{
float:left;
width:100%;
}
p{
margin:0px;
padding:0px;
}
/**********************HEADER*********************/
#header{
float:left;
width:100%;
}
.logo{
float:left;
width:20%;
height:150px;
cursor:pointer;
}
.logo img{
width:100%;
height:100%;
}
/************************HEADER END***************/
/************************FOOTER*******************/
#footer{
float:left;
width:100%;
}
/***********************FOOTER END****************/
See this image
In the above image you can see the IE generates Empty Text Node after the <img> tag.
I can't found why IE generate empty text node.Can anybody help me..?
IE shows this to any elements in the page that has a blank space between tags. This may not cause any problem.
The only consideration is when your content is inline and it adds a space between the elements. In this case, all you have to do is eliminate the blank space between the tags.
There is a line break and some whitespace for indentation after the image tag, which leads to creating an empty text node.
If you write your code like that:
<div class="logo"><img src="img/logo.png"/></div>
you will not have the empty text node any more.
Since it's really IE specific, I think it's just a bug of the parser.

DIV Displays Wider in IE8 works in FireFox, Safari, IE8 compat. Mode

I recently have attempted to add a line of "Social Media Icons" inside of a website. After creating a DIV and applying the properties everything looks fine in FireFox, Safari, and Internet Explorer 8 Compatability mode.
However, viewing the page in IE8 makes the DIV look like one pixel wider on the right-hand side. Also increasing the magnification in IE8 to 105% corrects the problem, yet this is hardly a satisfactory fix by my estimation.
Website URL: http://MikeChurch.com
Cascading Style Sheet (CSS)
#wrapper{
width:960px;
margin:auto;
}
#banner{
width:100%;
float:left;
}
#socialMedia{
background:#000000 no-repeat right top;
border-bottom:5px solid white;
border-left:5px solid white;
border-right:5px solid white;
overflow:hidden;
float:left;
width:99%;
}
#wrap-container{
width:100%;
float:left;
background:#fff;
}
#innerpad{
width:950px;
float:left;
padding:0px 5px 5px 5px;
HTML
// no direct access
defined( '_JEXEC' ) or die( 'Restricted access' );
include_once (dirname(__FILE__).DS.'/tmp_vars.php');
?>
<!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="<?php echo $this->language; ?>"
lang="<?php echo $this->language; ?>">
<head>
<jdoc:include type="head" />
<?php JHTML::_('behavior.mootools'); ?>
<link rel="stylesheet" href="<?php echo $tmpTools->baseurl(); ?
>templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $tmpTools->baseurl(); ?
>templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/css/layout.css"
type="text/css" />
<link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/css/modules.css"
type="text/css" />
<link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/css/template.css"
type="text/css" />
<link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/css/joomla.css"
type="text/css" />
<script type="text/javascript" src="<?php echo $tmpTools->templateurl(); ?
>/js/jb.script.js"></script>
<!--[if lte IE 6]>
<script type="text/javascript">
var siteurl = '<?php echo $tmpTools->baseurl();?>';
window.addEvent ('load', makeTransBG);
function makeTransBG() {
fixIEPNG($$('img'));
fixIEPNG ($$('#banner-top'), '', 'scale', 0, 2);
fixIEPNG ($$('#banner'), '', 'scale', 0, 2);
fixIEPNG ($$('#banner-bottom'), '', 'scale', 0, 2);
}
</script>
<style type="text/css">
.clearfix {height: 1%;}
img {
border: none;
}
templateurl(); ?
/css/template_ie6.css" type="text/css" />
<![endif]-->
<!--[if gte IE 7.0]>
<style type="text/css">
.clearfix {display: inline-block;}
</style>
<link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?
>/css/template_ie7.css" type="text/css" />
<![endif]-->
<!--[if gte IE 8.0]>
<style type="text/css">
.clearfix {display: inline;}
</style>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?
>/css/template_ie8.css" type="text/css" />
<![endif]-->
</head>
<body id="bg">
<div id="wrapper">
<a target="_blank" href="http://twitter.com/thekingdude"><img src="http://mikechurch.com/templates/mike_church/images/social_media_icons/twitter.jpg" title="Follow Mike on Twitter" alt="Follow Mike on Twitter" align="right" style="border:0"></a>
<a target="_blank" href="http://www.facebook.com/#!/TheKingDude?ref=ts"><img src="http://mikechurch.com/templates/mike_church/images/social_media_icons/facebook.jpg" title="Find Mike on Facebook" alt="Find Mike on Facebook" align="right" style="border:0"></a>
<a target="_blank" href="http://feeds.feedburner.com/MikechurchcomRssFeed"><img src="http://mikechurch.com/templates/mike_church/images/social_media_icons/rss.jpg" title="MikeChurch.com RSS Feed" alt="MikeChurch.com RSS Feed" align="right" style="border:0"></a>
<div style="float:right;vertical-align:middle;">
<a target="_blank" href="http://feedburner.google.com/fb/a/mailverify?
uri=MikechurchcomRssFeed&loc=en_US"><span style="color:white; vertical-
align:super">Keep up with the King Dude via eMaill RSS</span><img src="http://mikechurch.com/templates/mike_church/images/social_media_icons/rss_email.jpg"
title="Subscribe to MikeChurch.com RSS Feed by Email" alt="Keep up with the King Dude
via RSS email" style="border:0"></a></div>
</div>
<div id="innerpad">
<div id="wrap-topnav">
<div id="topnav">
<jdoc:include type="modules" name="topnav" />
</div>
<?php if( $this->countModules('search') ){?>
<div id="search-mod">
<div class="padding">
<jdoc:include type="modules" name="search" />
</div>
*Note: I have tried placing the DOCTYPE as the very first item in the HTML file, but it had no effect.
What happens there is that you said width='99%' which is subject to some rounding I believe and IE8 comes up with 1 extra pixel. You used a different technique for the div below, in order to obtain the white margin - a padding. On the social media div you used white borders with a width of 5px. IE counts the border width into the overall container width so if you'd say width=100% it would have been 10 pixels wider so I guess you chose 99% to make it closest to a right width.
I suggest you either use the same technique as in the "innerpad" div (paddings) or use an absolute width of 950px rather than a relative one.