Help
I've just finished making my first webpage and it looks good .... till I view it in internet explorer.
Its completely destroyed all my hard work. So I was hoping if maybe a pro could give me some tips on how to go about fixing the webpage without destroying my layout in other browsers.
Page 1 of 1
Internet explorer probles
Rate Topic:
#3
funsella 
- Dedicated Member
-
- Group: Platinum Membership
- Posts: 249
- Joined: 26-July 11
- Reputation: 19
- Gender:Male
- Location:London
- Experience:Beginner
- Area of Expertise:I'm Learning
Posted 30 July 2011 - 10:37 AM
mteam, on 30 July 2011 - 09:32 AM, said:
You got a link
unfortunitly I dont have a host yet ...
#4
Alias
- Advanced Member
-
- Group: Members
- Posts: 291
- Joined: 11-October 10
- Reputation: 10
- Gender:Male
- Location:Cheshire, UK
- Experience:Intermediate
- Area of Expertise:Designer/Coder
Posted 30 July 2011 - 10:54 AM
Erm, well its pretty hard to say what to do when we have no idea whats going on.
Make your own webserver on your computer and host it just to show people.
Make your own webserver on your computer and host it just to show people.
#7
funsella
- Dedicated Member
-
- Group: Platinum Membership
- Posts: 249
- Joined: 26-July 11
- Reputation: 19
- Gender:Male
- Location:London
- Experience:Beginner
- Area of Expertise:I'm Learning
Posted 30 July 2011 - 11:08 AM
Alias, on 30 July 2011 - 10:54 AM, said:
Erm, well its pretty hard to say what to do when we have no idea whats going on.
Make your own webserver on your computer and host it just to show people.
Make your own webserver on your computer and host it just to show people.
Ill look into how to do that then come back with a link , thanks
#8
funsella
- Dedicated Member
-
- Group: Platinum Membership
- Posts: 249
- Joined: 26-July 11
- Reputation: 19
- Gender:Male
- Location:London
- Experience:Beginner
- Area of Expertise:I'm Learning
Posted 30 July 2011 - 11:54 AM
zed, on 30 July 2011 - 10:55 AM, said:
also try validating your code as a starting point.
how do I validate my code?
mteam, on 30 July 2011 - 11:00 AM, said:
Post your html and css
here is a zip of my website I have managed to add in a ie only css file but still having problems trying to get everything to work
please go easy on me its my first webpage
This post has been edited by funsella: 30 July 2011 - 11:55 AM
#11
funsella
- Dedicated Member
-
- Group: Platinum Membership
- Posts: 249
- Joined: 26-July 11
- Reputation: 19
- Gender:Male
- Location:London
- Experience:Beginner
- Area of Expertise:I'm Learning
Posted 30 July 2011 - 04:17 PM
mteam, on 30 July 2011 - 03:18 PM, said:
Not exactly sure on the problems does this work correctly
Awesome ... it works in ie now ... thank you ... how you did you fix it?
#13
mteam
- Web Guru
-
- Group: Members
- Posts: 1,828
- Joined: 07-November 09
- Reputation: 247
- Gender:Male
- Location:Manchester
- Experience:Nothing
- Area of Expertise:Nothing
Posted 30 July 2011 - 05:36 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Blog Single Post</title>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="css/ie.css" />
<![endif]-->
</head>
<body>
<div id="container2">
<div id="container1">
<div id="col1">
<div id="left">
<!-- Logo starts here -->
<div id="logo">
<div id="logo-top">
<h1><a href="index.htm">Funsella</a></h1><!-- placed the link inside the H1 -->
<h2 class="logo">Another wordpress blog</h2>
</div>
<div id="logo-bottom"></div>
</div>
<!-- menu starts here -->
<div id="menu">
<ul>
<li><a href="#">home</a></li>
<li><a href="#">portfolio</a></li>
<li><a href="#">blog</a></li>
<li><a href="#">contact me</a></li>
</ul>
</div>
<!-- sidebar starts here -->
<div id="sidebar">
<h2 class="sidebar">Categories</h2>
<ul class="sidebar">
<li><a href="#">JavaScript</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">Photoshop</a></li>
<li><a href="#">Tutorials</a></li>
</ul>
<h2 class="sidebar">Archive</h2>
<ul class="sidebar">
<li><a href="#">March</a></li>
<li><a href="#">May</a></li>
<li><a href="#">June</a></li>
<li><a href="#">July</a></li>
<li><a href="#">August</a></li>
</ul>
</div>
</div>
</div>
<div id="col2">
<div id="right">
<div id="blog">
<h2>Why super heroes are awesome</h2>
<div class="featured-post">
<img src="pictures/feature_1.jpg" alt="super heroes" width="640px" height="190px" />
<div class="date">
<span>21 June</span>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">link looks like this</a> sed nisl dos desta condimentum sed fermentum sapien egestas. Pellentesque habitant morbi tristique moer senectus et netus et malesuada fames ac turpis egestas.</p>
<p>Nunc eget odio lectus. Maecenas aliquam magna sed nunc interdum cursus. Pellentesque id ante orci, a cursus augue. Sed eu sem purus, eu iaculis ipsum. Phasellus dapibus mi at justo molestie et dignissim tellus elementum. Donec vitae dui nibh. Sed id odio sapien. Phasellus venenatis fringilla massa sagittis condimentum.</p>
<img src="pictures/superhero.jpg" alt="super hero" width="335px" height="334px" />
<h3>A great 3D background</h3>
<img src="pictures/3d_heroes.jpg" width="481px" height="385px" alt=""/> <br />
<a href="#" class="button left">Download</a><!--removed the div and used bg position on the element-->
<a href="#" class="button-b left">View Demo</a><!--removed the div and used bg position on the element-->
<br />
<h4 class="clear">This is a list</h4>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
<div class="tags">
<h3>Tags:</h3>
<ul>
<li><a href="#">Marvel</a></li>
<li><a href="#">comics</a></li>
<li><a href="#">awesome</a></li>
</ul>
</div>
</div><!-- END blog -->
<div class="box-c">
<div class="back">
<a href="#">back</a><!--removed the div and used bg position on the element-->
</div>
<div class="next">
<a href="#">next</a><!--removed the div and used bg position on the element-->
</div>
</div>
<div id="footer">
<div class="left">
<span>copright all things awesome</span>
</div>
<div class="right">
<span>made by funsella</span>
</div>
</div>
</div><!-- END right -->
</div><!-- END col2 -->
</div>
</div>
</body>
</html>
h1 {
color: #FFFFFF;
font-size: 40px;
padding: 10px;
font-family: Georgia;
}
h2 {
color: #025992;
font-size: 25px;
padding: 10px 10px 10px 0;
padding-top: 20px;
}
h3 {
color: #025992;
font-size: 20px;
padding: 15px 10px 10px 0;
}
h4 {
color: #025992;
font-size: 18px;
padding: 15px 10px 10px 0;
}
.clear {
clear: both;
}
.left { float: left;}
.right { float: right;}
/* Main Wrappers */
#container2 { float:left; width: 100%; overflow: hidden;}
#container1 { float:left; background: #fff url(../images/right_border.gif) repeat-y; margin-left:40%; border-left: #252525 solid 5px; width: 100%; padding: 0 2000px 0 0;}
#col1 { float:left; width:40%; position: relative; left: -40%; }
#col2 { float:left; width:60%; position: relative; left: -40%; }
#left { width: 295px; float: right; margin-right: 5px;}
#right { width: 650px; float: left; margin-left: 10px;}
/* logo starts here */
#logo { width: 234px; height: 250px; padding: 0px; margin: 0 auto;}
#logo-top { background: url('../images/logo_bg_1.gif') repeat-y;}
#logo-bottom { background: url('../images/logo_bg_2.png') no-repeat; height: 234px; }
#logo-top h1 a { text-align: center; color: #FFFFFF; padding: 10px 30px; font-family: Georgia; }
#logo-top h1 a:hover{text-decoration:none;}
h2.logo { text-align: center; color: #FFFFFF; padding: 10px 30px; font-family: Georgia; }
/* menu starts here */
#menu { width: 214px; margin: 0 auto 9px; }
#menu ul { width: 214px; }
#menu ul li { height:40px; width: 214px;}
#menu ul li a { display: block; color: #FFFFFF; font-size: 24px; height: 33px; width: 204px; padding:7px 0px 7px 10px; }/*changed to padding to allow for lin-height*/
#menu ul li a:hover { background: url('../images/menu.png') no-repeat; text-decoration: none;}
#menu ul li a:active { background: url('../images/menu.png') no-repeat; text-decoration: none;}
/* side bar */
#sidebar { width:234px; margin: 9px auto; }
.sidebar { padding-left: 20px; }
#sidebar ul { width: 192px;}
#sidebar ul li { padding-top: 5px; }
#sidebar ul li a { display:block; padding:4px 0 0 0; width:192px; height: 22px; color: #FFFFFF; font-size: 16px; }
#sidebar ul li a:hover { background-color: #FFFFFF; color: #252525; text-shadow: 1px 0px 0px #c5c5c5; text-decoration: none; padding-left: 10px; }
/* Site wide */
/* links */
a { color: #1077ba;}
a:hover { text-decoration: underline;}
/* line breaks */
.line-a { background-color: #106298 ; height: 2px; }
/* blog */
#blog .featured-post { width: 650px; height: 200px; display: block; }
#blog .featured-post img { border: #1077ba solid 5px; width: 640px; height: 190px;}
#blog .featured-post .date { display: block; position: relative; top: -47px; left: 8px; background-color: #1077ba ; width: 80px; height: 35px; opacity: 0.5; }
#blog .featured-post .date span { color: #FFFFFF; display: block; width: 80px; height: 35px; text-align: center; padding-top: 8px; }
#blog h2,h3,h4,ul,li {text-shadow: none;}
/*lists*/
#blog ul li { padding: 4px 0 4px 30px; }
#blog ul li:first-child { padding: 0px 0 4px 30px; }
/* blog TAG lists */
#blog div.tags { width:650px; border-top: #106298 solid 2px; border-bottom: #106298 solid 5px; float: left; margin: 25px 0; }
#blog div.tags h3 { float: left; height: 24px; padding: 0; margin: 10px 0; }
#blog div.tags ul { float: left; margin: 6px 10px; position: relative; width: 580px;}
#blog div.tags ul li { float: left; padding: 0px; height: 24px; margin:4px 7px 4px 0px;}
#blog div.tags ul li:first-child { float: left; padding: 0px; height: 24px; margin-right: 7px;}
#blog div.tags ul li a { display: block; color: #FFFFFF; text-decoration: none; background: #025992; padding: 4px 5px;}
#blog div.tags ul li a:hover { text-decoration: underline; background: #106298;}
/* Buttons */
a.button,a.button-b { font-size: 16px; color: #FFFFFF; text-decoration: none; background: #025992; padding:10px 40px 10px 15px; margin-top: 6px; }
/*used bg position for the images*/
a.button-b { margin-left: 15px;background:url("../images/eye.png") no-repeat scroll 102px 12px #025992; }
a.button{background:url("../images/down_arrow.png") no-repeat scroll 95px 12px #025992;padding-right:32px;}
a.button:hover{background:url("../images/down_arrow.png") no-repeat scroll 95px 12px #1077BA;}
a.button-b:hover {background:url("../images/eye.png") no-repeat scroll 102px 12px #1077BA; }
.back { width: 110px; height: 40px; float: left; background-color: #252525; margin-top: 10px;}
/*used bg position for the images*/
.back a {display: block; float: right; margin: 10px; color: #fff; font-size: 20px;background:url("../images/left_arrow.png") no-repeat 7px 7px;padding:0 20px 0 30px;}
.back a:hover { text-decoration: none;background:url("../images/left_arrow.png") no-repeat scroll 5px 7px;}
.next { width: 110px; height: 40px; float: right; background-color: #252525; margin-top: 10px;}
.next a {display: block; float: right; margin: 10px; color: #fff; font-size: 20px; text-align: right;background:url("../images/right_arrow.png") no-repeat 60px 7px;padding:0 30px 0 20px;}
.next a:hover { text-decoration: none;background:url("../images/right_arrow.png") no-repeat scroll 62px 7px;}
/*.next a:hover .arrow_right {margin: 7px 5px 7px 9px;}*/
/* box's */
.box-c { float: left; clear: both; width: 660px; height: 60px; background-image: url('../images/bg.gif'); position: relative; left: -10px;}
/* icons & images */
/*.arrowdown { background-image: url('../images/down_arrow.png'); width: 11px; height: 18px; margin-left: 7px; }
.eye { background-image: url('../images/eye.png'); width: 27px; height: 18px; margin-left: 7px; }
.arrow_left { background-image: url('../images/left_arrow.png'); width:18px ; height:11px ;float: left; margin: 7px;}
.arrow_right {background-image: url('../images/right_arrow.png'); width:18px ; height:11px ;float: right; margin: 7px;}*/
/* footer */
#footer { width: 650px; float: left; clear: both;}
#footer span,#footer p,#footer a { font-size: 10px; color: #000;}
#14
funsella
- Dedicated Member
-
- Group: Platinum Membership
- Posts: 249
- Joined: 26-July 11
- Reputation: 19
- Gender:Male
- Location:London
- Experience:Beginner
- Area of Expertise:I'm Learning
Posted 30 July 2011 - 06:11 PM
mteam, on 30 July 2011 - 05:24 PM, said:
I'll add some comments to the code and post it so you can see what I changed
Thank you for fixing everything up for me !!!! your a champ !!!!
didn't think I could position a background.
something small to lol about...
After making all the changes I realised that ie was still way off .... so I installed WAMP and put my website on a local host and checked it again and pooof all the issues were gone.
this experience may have taken a year off of my expected life span and added an extra bald spot but I learnt a valuable lesson ...
thanks again for taking the time to help me !!!!
Share this topic:
Page 1 of 1