hena

September 14, 2015

hi friends,i am trying to develop a site ,as i am very much new to developing googling alone not helping me to resolve my issue.my problem now is i have horizontal menu with vertical dropdown menu.it is working perfectly with chrome and IE 11 BROWSERS, to check for the alignment when i press print screen all 4 main html pages header logo is moving towards center using CHROME but alignment is perfect when using IE.FOR sub menu alignment works fine for chrome and IE. i doubt sub menu it is high in contents and on the menu contents are less ,is it something cos of tat.i am totally worried.can someone please help meee

September 14, 2015

hi friends,i am trying to develop a site ,as i am very much new to developing googling alone not helping me to resolve my issue.my problem now is i have horizontal menu with vertical dropdown menu.it is working perfectly with chrome but to check for the alignment when i press print screen all 4 main html pages header logo is moving towards center when i press print screen.but for sub menu this code is working perfectly fine. i doubt sub menu it is high in contents and on the menu contents are less ,is it something cos of tat.i am totally worried.can someone please help meee

<!DOCTYPE html><!--using html 5--><html lang="en-US"><head><meta name="description" content="for family safety"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta http-equiv="X-UA-Compatible" content="chrome=1" />         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link href="index.css" rel="stylesheet" type="text/css" /></head><body><div id="header"><!--starts of header-->	<div id="site_title">	<h2>'IMPROVING HSE AT HOME' site!</h2>	<img class="image_wrapper image_fr" src="images/Logo_lockup.jpg" alt="image" />    <br><br><br>	</div></div> <!-- end of header --><div id="menu"> <!--starts of menu--><nav><ul><li><a href="index1.html">Home</a></li><li><a href="health.html" class="current">Health</a></li><li><a href="safety.html">Safety</a></li><li><a href="environment.html">Environment</a></li></ul></nav></div><!--end of menu--><div id="main"><!--start of main-->  <div class="inner_box last">     <div class="col_w900_last">    	 <div class="col_w420 lp_box float_l">		    <div class="inner_box">                <h2>HEALTH</h2>                   <P class="intro">Due to weather conditions in our Region, d healthy places to live.<br>                   			</div>		</div>		<div class="col_w420 float_r">          	<div class="post_box">            <div class="post_header">			  <img width="400" height="400" src="images/Health_93453718.jpg" alt="Image 001" />               </div> 		</div>	</div> </div></div> </div>  <!--end of main--><div id="footer">   </div> <!-- end of footer --></body></html>

September 13, 2015

the weird part when i press print screen it works perfectly fine with all sub menu only the main menus has problem that the log moving towards center for all i am using the same css

difference between menu and sub menu is i have form (for checklist) for tat.when i added form in to this alignment works fine but i need a checklist for mu main page .how to solve this

September 13, 2015

@foxy mod: i tried with % still its not working.still the logo coming towards center

the weird part when i press print screen it works perfectly fine with all sub menu only the main menus has problem that the log moving towards center for all i am using the same css

September 13, 2015

The size of the paper is not the same as your browser window. If the website is responsive it should adapt to the page properly.

Having fixed widths is going to cause problems when the viewport isn't wide enough, such as when printing. You need to use percentage widths and margins instead of pixels.

i tried with % still its not working.still the logo coming towards center

September 12, 2015

hi friends,

my webpage works fine with chrome but when i press the print screen(ctrl+p) header alignment changes.

i tried to correct in many ways nothing seems to work.

the twist it works fine for all sub menu

the alignment problem is only with main main pages(my logo is on right corner it is moving towards center when print)

<!DOCTYPE html><!--using html 5--><html lang="en-US"><head><meta name="description" content="for family safety"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta http-equiv="X-UA-Compatible" content="chrome=1" />         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link href="index.css" rel="stylesheet" type="text/css" /></head><body><div id="header"><!--starts of header-->	<div id="site_title">	<h2>'IMPROVING HSE AT HOME' site!</h2>	<img class="image_wrapper image_fr" src="images/Logo_lockup.jpg" alt="image" />    <br><br><br>	</div></div> <!-- end of header --><div id="menu"> <!--starts of menu--><nav><ul><li><a href="index1.html">Home</a></li><li><a href="health.html" class="current">Health</a></li><li><a href="safety.html">Safety</a></li><li><a href="environment.html">Environment</a></li></ul></nav></div><!--end of menu--><div id="main"><!--start of main-->  <div class="inner_box last">     <div class="col_w900_last">    	 <div class="col_w420 lp_box float_l">		    <div class="inner_box">                <h2>HEALTH</h2>                   <P class="intro">Due to weather conditions in our Region, d healthy places to live.<br>                   			</div>		</div>		<div class="col_w420 float_r">          	<div class="post_box">            <div class="post_header">			  <img width="400" height="400" src="images/Health_93453718.jpg" alt="Image 001" />               </div> 		</div>	</div> </div></div> </div>  <!--end of main--><div id="footer">   </div> <!-- end of footer --></body></html>

body {	margin: 0;	padding: 0;	color: #fff;	font-family: Arial;    font-size: 14px;	line-height: 1.5em; 	background-color: #ccc;	background-position: top}h1, h3, h4, h5, h6 { color: #fff; font-weight: normal }h1 { font-size: 34px; margin: 0 0 30px 0; padding: 5px 0; }h2 { font-size: 26px; margin: 0 0 20px 0; padding: 0;line-height: 1.1em; color:rgb(255,221,0); }.cleaner { clear: both }.h10 { height: 10px }.h20 { height: 20px }.h30 { height: 30px }.h40 { height: 40px }.h50 { height: 50px }.h60 { height: 60px }.float_l { float: left }.float_r { float: right }.image_wrapper { 	display: inline-block; 	padding: 0px; 	background: #000; 	margin-bottom: 5px; }.image_fr {position: absolute;top: 0;right: 0%;	float: right;height:100px;width:220px;	margin: 0px 0px 15px 15px; }#header {	clear:both;	height:110px;	margin:0 auto;	background-image:url(images/86930033.JPG);	}#site_title { 		}#site_title h2 {	margin: 0; 	text-align:center;	padding-top: 30px;	font-size:28px;    color:#000;text-shadow:2px 2px #0093d0;			}#menu {	width:960px;	position:relative;	margin: 0px auto;	background:#0093d0;}nav {	position:relative;}#main {	clear: both;	width: 900px;	margin: 0 auto;	padding: 45px 30px 0;	background-color: #54534a;	overflow:hidden;}.col_w900 { width: 900px; padding-bottom: 30px }.col_w420 { width: 420px }.col_allw280 { float: left; width: 280px; margin-right: 30px }.col_w900_last { margin: 0; background: none; }.inner_box { margin-bottom: 50px; padding-bottom: 50px;   }.last { margin: 0; padding: 0; border: none }.post_box { clear: both; margin-bottom: 30px }.post_box .post_header { padding: 10px 0; border: 1px; border-left: none; border-right: none; margin-bottom: 15px }.#footer {		clear: both;	width:900px;    /* padding: 25px 30px 0; */	padding: 45px 30px 15px;	margin: 0 auto;	background-color:#0093d0;	text-align: center;	color:  #fff;	}

September 12, 2015

HTML 5 semantic elements work in Internet Explorer 8 as long as you include an HTML 5 shiv, which essentially called document.createElement() to get it to recognize the new elements.

inline-block works in Internet Explorer 8 as far as I can remember. In even older versions if IE you can get inline-block to work if you apply it to elements that were inline to start with. By a lucky coincidence, Internet Explorer 8 will render all HTML 5 elements as inline by default, which means you can set inline-block to <section>, <article>, <figure>, <aside> and all the rest without any trouble.

As for HTML 5 functional elements such as <canvas> and <audio>, that won't work in old versions of Internet Explorer, but if it's just about CSS and semantic elements, there is absolutely no problem for Internet Explorer 8.

shall i write seperate css file for ie 7 to 8

September 12, 2015

You have to remember IE8 was 5 years behind all the better browsers, it did not support display: inline-block;, i think it only just begun to support :hover on elements other than the anchor element, it applied margins, padding, positioning differently, that is why IE was, is such a pain to work with.Also note it won't have any idea what new html5 elements are.

when we give the site to the third party we dont know rite what browsers they are using .so how to make this website compatible with all browsers

September 12, 2015

Right! chrome-1 relates to IE using a chromeframe, but apparently its discontinued, IE=edge will attempt to use newest version of IE (11)but apparently that is unreliable as new versions of IE developed, so its being its normal crappy browser self.

I AM currently working on IE8, on chrome the code works fine but on IE menu and sub menu becoming ordered lists

body {	margin: 0;	padding: 0;	color: #fff;	font-family: Arial;    font-size: 14px;	line-height: 1.5em; 	background-color: #ccc;}h2 { font-size: 26px; margin: 0 0 20px 0; padding: 0;line-height: 1.1em; color:rgb(255,221,0); }#header {	clear:both;	height:120px;	background-image:url(images/86930033.JPG);	}#site_title { 	float:left;	margin: 25px 0 0 405px;		}#site_title h2 { 	margin: 0; 	padding: 0;	font-size:28px;    color:#000;text-shadow:2px 2px #0093d0;			}#menu {	width:960px;	position:relative;	margin: 0px auto;	background:#0093d0;}nav {	position:relative;}nav ul {	margin:0;	padding:0;}nav ul li {	margin:0;	padding:0;	list-style:none;	display:inline-block;	position:relative;}nav ul li a {	font:bold 12px Arial;	text-transform:uppercase;	color:#fff;	padding:7px 10px;	display:inline-block;	text-decoration:none;}nav ul li:hover > a {	text-decoration:none;	color:#fff;	background:#ccc;}nav ul li a.current {	background:#fff;	color:#0093d0;}nav ul ul {	min-width:200px;	position:absolute;	top:100%;	z-index:666;	background:#0093d0;	display:none;}nav li:hover > ul {	display:block;}nav ul ul li {	display:block;	width:100%;}nav ul ul a {	padding:7px 10px;	display:block;	color:#fff;	border-bottom:1px solid #ddd;	text-align:left;}nav ul ul a:hover {	background:#ccc;}nav ul ul a.current {	background:#dddd;	color:#0093d0;}

#main {	clear: both;	width: 900px;	margin: 0 auto;	padding: 45px 30px 0;	background-color: #54534a;	overflow:hidden;}

<html lang="en-US"><head><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta http-equiv="X-UA-Compatible" content="chrome=1" />         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="../index.css" rel="stylesheet" type="text/css" /><body>  <div id="header"><!--starts of header-->	<div id="site_title">	<h2>'IMPROVING HSE</h2>	<img class="image_wrapper image_fr" src="../images/Logo_lockup.jpg" alt="image" />    <br><br><br>	</div></div> <!-- end of header --><div id="menu"> <!--starts of menu--><nav><ul><li><a href="../index1.html">Home</a></li><li><a href="../a.html">a</a><ul><li><a href="../a1.html">a1</a></li><li><a href="a2.html">a2</a></li></ul></li><li><a href="../b.html" class="current">b</a><ul><li><a href="b1.html">b1/a></li><li><a href="b2.html">b2</a></li><li><a href="b3.html">b3</a></li></ul></li></ul></nav></div><!--end of menu-->

September 11, 2015

Looks like i was right! Mind you the massive left margin fixed width won't help either. This will cause a off centre container element and therefore an off centre header title.

thanku for ur inputs.

September 11, 2015

X-UA-Compatible is only supported by the crappy of crap IE browsers, the other better browser don't require this being better browsers they are more future proof. So it only expects "IE=n" where 'n' equals the IE version you are targeting.

so u are telling no need to keep the meta tag chrome=1 and instead of IE=edge, i should keep IE=11 ,is that so?

September 11, 2015

Since we have no html to work with, i'll just guess that the header is in the floated element, this element will shrink to content forcing it left.

<div id="header"><!--starts of header-->	<div id="site_title">	<h2>'IMPROVING HSE AT HOME'</h2>		  <img class="image_wrapper image_fr" src="images/Logo_lockup.jpg" alt="image"  /><br><br><br>	</div></div> <!-- end of header -->

September 11, 2015

hi all,

i am new to developing,

i am trying to develop a site with the help of googling.

In my header title, its not aligning to center even if i give the property text-align:center

#header {	clear:both;	height:110px;	background-color:#fff;	}#site_title { 	float: left; 		margin: 25px 0 0 405px; 	}#site_title h2 { 	margin: 0; 	padding: 0;    color:#000;			}

waiting for the valuable inputs

September 11, 2015

hi friends,

i am asked to create a website which is compatible to chrome and IE 11.

i am developing the site in html5

when i added meta tags

<meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta http-equiv="X-UA-Compatible" content="chrome=1" />

its showing error in w3 html5 validator

Error: A meta element with an http-equiv attribute whose value is X-UA-Compatible must have a content attribute with the value IE=edge.

From line 5, column 1; to line 5, column 56

=edge" />↩<meta http-equiv="X-UA-Compatible" content="chrome=1" /> ↩<met

how to correct this

September 10, 2015

The problem is that the relative paths have to be correct from the active file. If you have a file named personal_hygiene.html inside a folder C:/Users/DELL/Desktop/a/health then the relative path inside that file to reach the index.html file in the folder Desktop/a needs to be...
<li><a href="../index1.html">Home</a></li>
...and to reach the safety sub-folder (C:/Users/DELL/Desktop/a/safety) from the health sub-folder you need...
<li><a href="../safety/fire_hazards.html">Fire Hazards</a></li>

thanks ton for your helpppppp

September 9, 2015

Its because you should be using a local server such as wamp or xamp, and you are not working from what would be your root directory.When you select health folder file, the folder you are now in becomes your root so when you click hazard file it expects a folder within health of safety.On local server your root where you would work from would most likely be in your case ‘a/‘ not using server but your computer file system it isfile///C:/Users/DELL/Desktop/a/

@dsonesuk: sorry ,as i am fresher on programming how can i rectify the issue.as u said its taking computer file system

September 9, 2015

When you hover over a link the href value of the link is normally visible at the bottom of the window in the browser. Do you see this? In the above code you have some href values set to # so obviously they won't work.

<div id="menu"> <!--starts of menu--><ul ><li><a href="index1.html" class="current">Home</a></li><li><a href="health.html">Health</a><ul><li><a href="health/personal_hygiene.html">Personal Hygiene</a></li><li><a href="health/food_hygiene.html">Food Hygeiene</a></li></ul></li><li><a href="safety.html">Safety</a><ul><li><a href="safety/fire_hazards.html">Fire Hazards</a></li><li><a href="safety/cooking_gas.html">Cooking Gas</a></li></ul></li></ul></div><!--end of menu-->

September 9, 2015

<div id="menu"> <!--starts of menu--><ul ><li><a href="index1.html" class="current">Home</a></li><li><a href="health.html">Health</a><ul><li><a href="health/personal_hygiene.html">Personal Hygiene</a></li><li><a href="health/food_hygiene.html">Food Hygeiene</a></li></ul></li><li><a href="safety.html">Safety</a><ul><li><a href="safety/fire_hazards.html">Fire Hazards</a></li><li><a href="safety/cooking_gas.html">Cooking Gas</a></li></ul></li></ul></div><!--end of menu-->

this is the code that was just the structure i gave.

i have kept 2 folders for health and safety inside that i have kept html child files (sub menu)of the corresponding menu

is it something with that issue

why browser not understanding the path ..i don't kno

if i click on the first time say first time i am directly clicking to personal hygiene it will work

but then if am directly clicking on fire hazards(under safety) it wont work.if i click anything under my health it will work again i have to click on safety then if i click on fire hazards it will work.

No webpage was found for the web address:

http://file:///C:/Users/DELL/Desktop/a/health/safety/fire_hazards.html

the web add shown above is incorrect.

i have kept fire hazards in safety-firehazards folder

and not in health -safety-firehazards folder

why is the path is showing wrong

September 8, 2015

hi friends,

I am a beginner in programming.Now i am assigned with the task of making a site with html5 and css.The issue what i am facing is

I have a horizontal menu bar with vertical sub menu will come on hover.

3 main tabs home ,health,safety

under that i have sub menus health 1,health 2,safety 1 ,safety 2

when i am clicking all main menus are working fine.

But when i am hovering menu sub-menu display will come page wont load if i click any sub menu ,

If i am on home page and on hover am clicking on safety 1(sub menu) the page wont load:

Error message:"

This webpage is not found"

but if am clicking on safety and then on safety 1 it works fine.

without clicking on safety and just by hover clicking on safety 1 ,the page wont display.

How to correct this ,please help me?

<div id="menu"> <!--starts of menu--><ul ><li><a href="index1.html" class="current">Home</a></li><li><a href="health.html">Health</a><ul><li><a href="#">health1</a></li><li><a href="#">health2</a></li></ul></li><li><a href="safety.html">Safety</a><ul><li><a href="#">safety1</a></li><li><a href="#">safety2</a></li></ul></li></ul></div><!--end of menu-->

#menu {	display:block;	position:relative;	width: 960px;	height: 50px;	background-color: #fff;		margin: 0px auto;	border:1px solid #000;}#menu ul li a:hover{	color:#c1d82f;} #menu ul .current {	color: #b13932;	}#menu li:hover ul{		display:block;	}#menu ul {	margin: 0px;	padding: 4px 0px;	}#menu  li {	float:left;	position:relative;	list-style-type:none;}#menu  li a {		display: block;	padding:10px 45px;	margin-right: 5px;	font-weight: 700;	font-size: 14px;	color: #0093d0;	text-decoration: none;	}#menu ul :after{	content:".";    height:0px;	 display:block;	clear:both;	visibility:hidden;}#menu ul ul{		position:absolute;	left:0px;	display:none;	background-color:#fff;	}#menu ul ul li {	border:2px solid #54534a;	width:100%;}#menu ul ul li a{	border-right:none;	padding:5px 5px;	color:#0093d0;}

I think i need a code that the sub menu will come only on the click of main menu and not by hover.

Sign In

hena

Posts

Joined

Last visited

Content Type

Profiles

Forums

Events

Posts posted by hena

page not aligning on print screen

page not aligning on print screen

alignment chnages when i press print screen

alignment chnages when i press print screen

alignment chnages when i press print screen

alignment chnages when i press print screen

meta tag chrome=1,showing error

meta tag chrome=1,showing error

meta tag chrome=1,showing error

header title not align to center

meta tag chrome=1,showing error

header title not align to center

header title not align to center

meta tag chrome=1,showing error

html5 dropdown menu not loading correctly over hover

html5 dropdown menu not loading correctly over hover

html5 dropdown menu not loading correctly over hover

html5 dropdown menu not loading correctly over hover

html5 dropdown menu not loading correctly over hover

Browse

Activity