8 replies [Last post]
mowen10
Offline
newbie
Manchester
Last seen: 3 years 1 week ago
Manchester
Timezone: GMT+1
Joined: 2011-03-28
Posts: 5
Points: 7

Hi, I have created a new website (through some help from a template) but seem to be having problems displaying this in Internet Explorer. Viewing the website on all other browsers shows the website as it needs to but not in Internet Explorer.

The following is the link:

www.mediadezines.co.uk/designprint/brightbees/
Link edited to use BB tags as well as for code, please preview posts before submitting - Hugo

Also the following is the CSS:

/* =================== Getting the new tags to behave START ====================== */
 
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video { display: block; }
mark, rp, rt, ruby, summary, time { display: inline }
 
/* ==================== Getting the new tags to behave END ======================= */
 
 
 
 
 
/* ========================= Global properties START ============================= */
 
body {
	background: #f4f4f4;
	min-width: 980px;
	height: 100%;
	font-family: Arial, Helvetica, sans-serif;
	line-height: 1em;
	color: #989998;
}
 
html {
	background: transparent;
	min-width: 980px;
	height: 100%;
	margin: 0;
	padding: 0;
	outline: 0;
	vertical-align: top;
	font-size: 100%;
}
 
div {
	border: 0 none;
	font-size: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	vertical-align: top;
}
 
a {
	outline: none;
	color: #294a02;
	text-decoration:none;
}
 
	a:hover {
		text-decoration:underline;
	}
 
h2{font-size:4em; line-height:1.2em; letter-spacing:-3px; margin-bottom:7px; color:#FE6B01}
    h2.extra{margin-bottom:14px}
	h2.extra1{margin-bottom:16px}
 
h3{font-size:3.167em; line-height:1.1em; letter-spacing:-1px; margin-bottom:18px}
    h3 .line{display:block; margin-top:-8px}
	h3.extra{margin-bottom:22px}
	h3.extra1{margin-bottom:12px}
	h3.extra2{margin-bottom:16px}
	h3.extra3{margin-bottom:23px}
 
h5{font-size:1.417em; line-height:1.353em; font-weight:normal; word-spacing:2px; margin-bottom:11px}
h5.green{color:#417604}
    h5.extra{margin-bottom:13px}
	h5.extra1{margin-bottom:8px}
 
p{line-height:1.5em; margin-bottom:18px}
    p.extra{margin-bottom:15px}
	p.extra1{margin-bottom:10px}
	p.extra2{margin-bottom:7px}
	p.extra3{margin-bottom:14px}
	p.extra4{margin-bottom:35px}
	p.extra5{margin-bottom:16px}
	p.extra6{margin-bottom:11px}
	p.extra7{margin-bottom:25px}
	p.extra8{margin-bottom:23px}
 
h6{line-height:1.5em; font-weight:normal; color:#294a02}
/* ========================= Global properties END =============================== */
 
 
 
 
 
 
/* ========================= Global Structure START ============================== */
 
#main {
	font-size: 0.75em;
	background:#fff;
	min-width:980px;
}
 
header {
	position: relative;
	height:226px;
	z-index:30;
}
 
#content {
	position:relative;
	overflow:hidden;
}
 
footer {
	background:url(../images/footer_tail.jpg) left top repeat-x #f4f4f4;
	margin-top:-80px;
	padding:104px 0 7px;
	min-height:56px;
	line-height:20px;
}
 
.top_tail{background:url(../images/top_tail.jpg) left top repeat-x; min-width:980px}
.top_bg{background:url(../images/top_bg.jpg) center top no-repeat; min-width:980px}
.mid_tail{background:url(../images/mid_tail.jpg) left 484px repeat-x; min-width:980px}
 
#page1 .mid_tail, #page8 .mid_tail{background-position:left 595px}
 
aside.red_block{position:absolute; right:0; bottom:0; padding:0 5px; height:304px; z-index:30}
/* ========================= Global Structure END ================================ */
 
 
 
 
 
 
/* ====================== Left & Right alignment START =========================== */
 
.fleft {
	float: left;
}
 
.fright {
	float: right;
}
 
.col-1, .col-2, .col-3, .col-4 {
	float: left;
	overflow: hidden;
}
 
.block-1, .block-2, .block-3, .block-4 {
	float: left;
	overflow: hidden;
}
 
.align_center {
	text-align: center;
}
 
.align_right{
    text-align: right;	
}
 
.wrapper {
	width: 100%;
	overflow: hidden;
}
 
.clear {
	clear: both;
	font-size: 0%;
	line-height: 0%;
	height: 0;
}
 
/* ====================== Left & Right alignment END ============================= */
 
 
 
 
 
/* ============================== header START =================================== */
 
header .wrapper{height:161px; position:relative}
 
#logo {position:absolute; top: 28px; left: -500px; text-transform:lowercase}
	#logo a{display:block; text-decoration:none}
	#logo a:hover{text-decoration:none}
		#logo .slogan{display:block; color:#f9f9f9; font-weight:normal; font-size:1.167em; margin-top:6px; word-spacing:3px}
 
header nav{position:relative; height:65px; background:url(../images/menu_bg.jpg) left top repeat-x; width:950px; margin:0 auto}
    #menu > li{float:left; width:136px; background:url(../images/left_brd.jpg) left top repeat-y; height:65px; position:relative}
	#menu > li:first-child{width:134px}
	#menu > li > a{line-height:65px; display:block; background:url(../images/right_brd.jpg) right top repeat-y; font-weight:bold; font-size:1.417em; text-align:center; text-transform:lowercase; color:#fff;}
	#menu li a{text-decoration:none}
	#menu li a:hover{text-decoration:none}
	#menu > li > a:hover, #menu > li.current > a, #menu > li.sfHover > a{color:#01AEEF; background:url(../images/menu_hover.jpg) left top repeat-x #e7e7e7}
 
	#menu ul{position:absolute; width:136px; left:0; top:65px; display:none; z-index:200}
	#menu ul a{display:block; color:#fff; padding:5px 9px 6px 19px;  background: url(../images/sub_menu.gif) left top repeat-x #1e3702; border-top:1px solid #ffffff; border-left:1px solid #ffffff; border-right:1px solid #ffffff; border-bottom:1px solid #ffffff}
	#menu ul a:hover, #menu ul .current a{color:#01AEEF}	
 
.head_info{position:absolute; right:-400px; top:49px; text-align:right; overflow:hidden}
    .head_info span{display:block; line-height:1.2em}
    .head_info .phone{color:#FE6D01; font-size:2.917em; margin:-1px -3px 0 0; font-weight:bold}
	.head_info .yellow{font-size:2.167em}
	.head_info .green{font-size:0.917em; text-transform:uppercase; word-spacing:1px; color:#407504}
 
/* =============================== header END ==================================== */
 
 
 
 
 
/* ============================= content START =================================== */
#slider{width:950px; height:253px; position:relative; z-index:20; overflow:hidden}
 
.grid_24{background:#fff}
.orange_block{
	background:url(../images/orange_bg.jpg) right top no-repeat #ec8400;
	color:#fff;
	position:relative;
	z-index:25;
	background-image: url(../images/orange_bg.jpg);
	background-color: #4D73C3;
}
.orange_block2{background:url(../images/orange_bg2.jpg) left top no-repeat #ec8400; color:#fff; position:relative; z-index:25}
.red_block{background:#01AEEF; color:#fff; -webkit-box-shadow: rgba(0,0,0, 0.29) 0px 0px 131px inset; -moz-box-shadow: rgba(0,0,0, 0.29) 0px 0px 131px inset; box-shadow: rgba(0,0,0, 0.29) 0px 0px 131px inset;}
 
 
.list1{}
    .list1 li{margin-bottom:30px}
    .list1 .last{margin-bottom:0}
 
.list2{width:33%; margin-bottom:16px}
    .list2 li{overflow:hidden; margin-bottom:10px}
	.list2 a{color:#fff; display:block; padding-top:5px; overflow:hidden}
	.list2 a strong{font-size:1.167em; line-height:16px; text-transform:uppercase; color:#fec603; display:block}
	.list2 a:hover{color:#fec603; text-decoration:none}
	.list2 a:hover strong{color:#fff}
	.list2 a img{margin:-5px 20px 0 0}
	.list2 a span{padding-right:10px; background:url(../images/marker.gif) right center no-repeat}
	.list2 .last{margin-bottom:0}
 
.list{line-height:22px; overflow:hidden}
    .list li{padding-left:18px; background:url(../images/marker.gif) left 7px no-repeat; overflow:hidden}
 
.list3{line-height:22px; overflow:hidden; margin-bottom:29px}
    .list3 li{padding-left:18px; background:url(../images/marker2.gif) left 7px no-repeat; overflow:hidden}
 
.list4{overflow:hidden}
    .list4 li{overflow:hidden; margin-right:60px; width:405px; float:left}
	.list4 .last{margin-right:0; width:415px}
	.list4 img.fleft{margin:5px 15px 0 0}
	.list4 h5{margin-bottom:14px}
	.list4 div{overflow:hidden}
	.list4 p{margin-bottom:11px}
 
.list5{padding-top:5px; margin-bottom:6px}
    .list5 li{float:left; width:170px; overflow:hidden; margin-right:44px}
	.list5 img{margin-bottom:17px}
	.list5 p{margin-bottom:5px}
	.list5 .more{font-size:1em}
 
.map{width:282px; height:260px; border:1px solid #a09b96; margin-bottom:25px}
 
.contacts{line-height:20px; margin-bottom:20px; width:162px}
/* ============================== content END ==================================== */
 
 
 
/* =================== txt, links, lines, titles START =========================== */
.red_more{background:url(../images/red_more.gif) left top repeat-x #951301; display:inline-block; border-top:1px solid #01A1EF; border-left:1px solid #01A1EF; border-right:1px solid #01A1EF; border-bottom:1px solid #7f1001; line-height:43px; color:#fff; font-size:2.083em; font-weight:bold; text-decoration:none; padding:0 11px}
    .red_more:hover{text-decoration:none; background-position:left -43px; background-color:#01A1EF}
 
.green_more{background:url(../images/green_more.gif) left top repeat-x #244102; display:inline-block; line-height:45px; color:#fff; font-size:2.083em; font-weight:bold; text-decoration:none; padding:0 12px}
    .green_more:hover{text-decoration:none; background-position:left -45px; background-color:#1c3300}
 
 
.more{display:inline-block; padding-right:9px; background:url(../images/more_marker.gif) right 8px no-repeat; font-size:1.083em; color:#fff; line-height:18px; text-decoration:underline}
    .more:hover{text-decoration:none}
.more.green{background-image:url(../images/more_marker2.gif)}
 
.more1{font-size:1.167em}
/* ==================== txt, links, lines, titles END ============================ */
 
 
 
 
 
/* ============================= forms START ===================================== */
 
#contact_form {padding:5px 0 0}
    #contact_form input, #contact_form textarea{float:left; margin:0; border:1px solid #a09b96; font:12px Arial, Helvetica, sans-serif; color:#294a02; padding:5px 5px 4px; width:247px}
	#contact_form textarea{width:380px; height:236px; overflow:auto; resize:none}
	#contact_form .name{color:#294a02; font-size:1.167em; line-height:1.2em}
	#contact_form .clearfix{margin-bottom:8px}
	#contact_form .buttons{padding-top:8px}
	#contact_form .form_but{text-decoration:underline; padding-left:10px; background:url(../images/form_bull2.gif) left 6px no-repeat; margin-right:27px}
	#contact_form .form_but:hover{text-decoration:none}
 
 
#order_form{color:#294a02; padding:3px 12px 21px}
    #order_form .clearfix .clearfix{padding-left:71px; margin-bottom:5px}
	#order_form .name{float:left; width:61px; text-align:right; margin-left:-71px; padding:1px 10px 0 0}
	#order_form input[type='text'], #order_form input[type='tel']{border:1px inset #dad5c2; font:12px Arial, Helvetica, sans-serif; color:#294a02; padding:1px 5px; width:157px; float:left; margin:0; outline:none}
	#order_form p.extra6{padding-left:12px}
 
	#order_form table{width:481px; margin:25px 0 0 69px}
	#order_form table th{font-weight:normal; text-align:left}
	#order_form table th, #order_form table td{border:1px solid #ffb03f; padding:4px 9px 3px}
	#order_form table td{padding:1px 9px}
	#order_form .col1{width:106px}
	#order_form .col2{width:197px}
	#order_form .col3{width:53px}
	#order_form .col4{width:48px}
	#order_form table input[type='text']{border:none; background:none; text-align:center; width:38px}
 
	#order_form span.align_center{display:block}
 
	#order_form .buttons{font-family:Tahoma, Geneva, sans-serif; padding:24px 0 0 69px;}
	#order_form .form_but{color:#fff; text-decoration:underline; padding-left:10px; background:url(../images/form_bull.gif) left 6px no-repeat; margin-right:42px}
	#order_form .form_but:hover{text-decoration:none}
 
 
/* ============================== forms END ====================================== */
 
 
 
 
 
/* ============================= other START ===================================== */
 
.pic_indent {margin: 0 0 13px 0;}
.pic_indent1 {margin: -5px 33px 0 23px;}
.pic_indent2 {margin: 8px 17px 0 0;}
.pic_indent3 {margin: 6px 32px 0 0;}
.pic_indent4 {margin: 0 0 15px 0;}
.pic_indent5 {margin: -3px 0 26px;}
.pic_indent6 {margin: 5px 30px 0 0;}
.pic_indent7 {margin: 4px 29px 0 0;}
.pic_indent8 {margin: 0 0 23px 0;}
 
 
.yellow{color:#f9ba04}
.green{color:#294a02}
.white{color:#fff}
.red{color:#a01602}
.gray{color:#989998}
.blue{color:#00B5FD}
 
.article_inner{padding:23px 30px 30px}
.article_inner1{padding:60px 30px 334px 20px}
.article_inner2{padding:20px 30px 334px}
.article_inner3{padding:20px 30px 51px}
.article_inner4{padding:20px 30px 45px}
.article_inner5{padding:23px 30px 33px}
.article_inner6{padding:20px 30px 34px}
.article_inner7{padding:15px 30px 30px}
 
 
.aside_inner{padding:23px 25px}
 
.top_indent{margin-top:0px}
.top_indent1{margin-top:-18px}
.top_indent2{margin-top:-26px}
.top_indent3{margin-top:49px}
 
.right_indent{margin-right:-10px}
 
.left_indent{padding-left:10px}
.left_indent1{margin-left:34px}
.left_indent2{padding-left:20px}
.left_indent3{margin-left:-17px}
 
.bot_indent{margin-bottom:54px}
.bot_indent1{margin-bottom:27px}
 
.extra0{margin-bottom:0}
 
/* ============================== other END ====================================== */
 
 
 
 
 
/* ============================ footer START ===================================== */
footer{color:#747474}
    footer a{color:#747474}
    #footer_menu li{float:left; margin-right:16px}
	.copy{text-align:right}
	    .copy b{margin:0 1px}
	.footer_link{text-align:right}
/* ============================= footer END ====================================== */

Can any1 please help me understand where I have gone wrong?

Any help would be appreciated, thanks in advance.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 34 weeks 4 days ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Um....

You've provided no link to the page, no look at your HTML and haven't actually said what the display issues are.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 14 weeks 3 days ago
London
Joined: 2004-06-06
Posts: 15650
Points: 2788

Post just needed a little Mod

Post just needed a little Mod editing!

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 14 weeks 3 days ago
London
Joined: 2004-06-06
Posts: 15650
Points: 2788

OP you must add a DTD to that

OP you must add a DTD to that page/ site head element then validate the markup and correct any errors reported. Please read our posting guidelines on how to post as we can't help greatly until these two aspects are dealt with.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

mowen10
Offline
newbie
Manchester
Last seen: 3 years 1 week ago
Manchester
Timezone: GMT+1
Joined: 2011-03-28
Posts: 5
Points: 7

Hugo, thanks for your help

Hugo, thanks for your response. I have added the following DTD to my html page.

<!DOCTYPE html>
<html lang="en">
<head>
<title>My Website</title>
<meta charset="utf-8">

This has resolved alot of the issues, barring the navigation bar which is still being shown vertically as a list rather than horizontally and with its own buttons.

Any ideas? Thanks for your help btw... Also if i need to save this as a php file because i need to add some php code, would the same DTD work?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 14 weeks 3 days ago
London
Joined: 2004-06-06
Posts: 15650
Points: 2788

PHP is parsed server side and

PHP is parsed server side and happens before anything else, one of it's last processes is to prepare the actual page for download as per the browser request, so it doesn't really know or care about a DTD as such, this is part of the page rendering after PHP has done it's work. Of course things can go wrong though and I'm not certain of exactly how or what you're adding by way of PHP code but fundamentally you can add script to the page and ask the PHP engine to process that before returning the page for output.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 14 weeks 3 days ago
London
Joined: 2004-06-06
Posts: 15650
Points: 2788

In what browser are you

In what browser are you seeing this Nav issue? Online it looks fine - at least in FF - but you are using the child selector '>' for rulesets so the navigation layout likely will fail in IE6 if you are worried about that browser.

N.B if you haven't already try and update the online site to reflect changes made like DTD.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

mowen10
Offline
newbie
Manchester
Last seen: 3 years 1 week ago
Manchester
Timezone: GMT+1
Joined: 2011-03-28
Posts: 5
Points: 7

Hugo, thanks for your

Hugo, thanks for your responses. I will get the files uploaded to reflect the changes made to the DTD.

In regards to the navigation issue, the website works in IE7 now as well (thank god! lol), only problem is IE6 and you have pointed out that this is down to the child selectors. Would there be any way to resolve this within the stylesheet?

The reason for wanting to save pages down as php is the client would like a contact page that users can fill in a form and this can then be emailed to the required address. Also would like a news feed on the home page that is ran through an external text file that he can amend when required.

Thanks for your help once again.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 14 weeks 3 days ago
London
Joined: 2004-06-06
Posts: 15650
Points: 2788

Quote: Would there be any way

Quote:

Would there be any way to resolve this within the stylesheet?

Yes don't use them! Smile

They are only used as a means of ensuring that certain rules are only applied to specific levels and not all similar ul, li, a elements, the original approach was to apply to all levels and then after reset for a nested level that had inherited the general rule although this was a more cumbersome approach it had benefit of working in IE6; another approach is to add classes to the various elements but you still have the issue that in reality you use these classes to reset inherited values form parent elements.

The other approach or approaches would be either use Conditional Comment styles for a IE only stylesheet or employ a script that fixes IE6's lack of selector understanding.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me