Recently, I've been working on my coursework for college, and we have to make portfolio's and an website as part of this. I made both of these and they worked perfectly in Internet Explorer 7. The real problem occurs when i open it up in Firefox. Much of the content which i've put in is displaced alot with all the areas ive made into div-tags etc.
My HTML Code is for my 'website' home page is: - <!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>
-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-
<title>[SciFiBuy] - Home</title>
-
<link href="CSS/CSS.css" rel="stylesheet" type="text/css" />
-
</head>
-
-
<body>
-
<div class="Header">
-
<p align="left"><img src="Images/Jericho=Style2.gif" width="96" height="96" /></p>
-
</div>
-
<div class="Navigation">
-
<p><a href="Index.htm">Home</a><a href="TVSeries.html">TV Series</a><a href="Films.html">Films</a><a href="SpecialOffers.html">Special Offers</a><a href="ContactUs.html">Contact Us</a><a href="SiteMap.html">Site Map</a><a href="OrderForm.html">Order Form</a></p>
-
</div>
-
<div class="Content">
-
<p>Welcome to SciFiBuy </p>
-
<p> </p>
-
<p> </p>
-
</div>
-
<div class="Footer">
-
<p>Footer </p>
-
</div>
-
</body>
-
</html>
-
And my CSS is: -
@charset "utf-8";
-
body {
-
background-color: #000033;
-
}
-
.Header {
-
color: #000000;
-
font-size: 50px;
-
font-weight: bolder;
-
font-style: italic;
-
border: thin double #FFFFFF;
-
text-align: center;
-
width: 1021px;
-
background-color: #0099FF;
-
position: absolute;
-
left: 7px;
-
top: 7px;
-
height: 99px;
-
background-image: url(../Images/Header.gif);
-
background-repeat: no-repeat;
-
vertical-align: middle;
-
padding-top: 3px;
-
padding-left: 3px;
-
}
-
.Navigation {
-
color: #FFFFFF;
-
position: absolute;
-
top: 113px;
-
left: 4px;
-
width: 1000px;
-
text-align: center;
-
background-image: url(../Images/nav.gif);
-
background-repeat: no-repeat;
-
background-position: center;
-
}
-
.Navigation a {
-
display: inline-block;
-
margin: 3px;
-
padding: 3px;
-
text-align: center;
-
border: thin solid #FFFFFF;
-
font-weight: bolder;
-
color: #000000;
-
text-decoration: none;
-
}
-
-
.Footer {
-
color: #FFFFFF;
-
position: absolute;
-
left: 15px;
-
top: 475px;
-
}
-
.Content {
-
color: #000000;
-
position: absolute;
-
left: 4px;
-
top: 145px;
-
border: thin solid #FFFFFF;
-
margin: 3px;
-
padding: 3px;
-
width: 1018px;
-
height: 486px;
-
background-color: #0099FF;
-
font-weight: bold;
-
}
-
Anyone know of why this may be occuring and what i can do to fix this?
Regards
Matty H.
9  1525 
IE7 is 10 years behind web standards or mis-implemented. Did you design in IE7 first? Never use IE as a reference. Always use a modern browser like Firefox, Opera or Safari to initially test your site. Then we can adjust for IEs quirks and bugs.
I'll look at this shortly.
You are absolutely positioning Navigation and Content. Doing so removes those elements from the normal flow which is causing them to rise up to the next positioned element. Firefox is performing correctly while IE is not, as usual.
I don't have time to look any more right now but I didn't see exactly why you need abs pos to do what you are doing.
While you are adjusting things, use Firefox to test first. Then see what IE does. The hacks to fix IE are known.
So, i should design my website around firefox initially... so it good in that first?
Also, i used absolute because we were told to. I was aware there were three other options but i was not aware of what each does.
Also, what are these 'hacks' you speak off? Which fix it for internet explorer?
~Regards
Matty
So, i should design my website around firefox initially... so it good in that first?
Exactly. Firefox is more standards compliant and most likely to show what you actually wrote. IE tends to make things up on its own.
Also, i used absolute because we were told to.
That's fine, but you need to remember that they are removed from the flow and 'free float' around the page, constrained only by the nearest positioned element. If you surround an abs pos element with a relatively positioined one, it will follow that element around as its 'center of the universe' so to speak.
what are these 'hacks' you speak off? Which fix it for internet explorer?
There are hundreds of web sites dedicated to fixing IE but a few are more notable. One of the best lists of IE hacks For what works and doesn't in browsers More IE bugs and their fixes
Cheers for all, just one thing left im confused with whichw as the positioning.
Im not too much of an expert in CSS so i didn't quite understand what you were saying about the positioning types (absolute, relative etc)
Regards
~Matty
Look them up at W3Schools.com.
Sorry, very sick today.
I redesigned my website so it looked perfect in Firefox, but now how do i go about actually correcting the errors which now appear in Internet Explorer.
Link or the complete markup.
HTML:
[html]
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>::[ Index ]::</title>
<link href="css/CSS.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="Header">
<p> </p>
</div>
<div class="Navigation">
<p><a href="Index.html">Home</a> <a href="Pages/TVSeries.html">TV Series</a> <a href="Pages/Films.html">Films</a> <a href="Pages/OrderForm.html">Order Form</a> <a href="Pages/SpecialOffers.html">Special Offers</a> <a href="Pages/ContactUs.html">Contact Us</a> <a href="Pages/SiteMap.html">Site Map</a></p>
</div>
<div class="Content">
<p>Content</p>
</div>
<div class="Logo"></div>
</body>
</html>
[/html]
CSS: -
@charset "utf-8";
-
body {
-
background-color : #000033;
-
color : #ffffff;
-
font-weight : bolder;
-
}
-
.Header {
-
background-image : url(../images/Header.gif);
-
position : absolute;
-
width : 1024px;
-
height : 102px;
-
border : thin solid #ffffff;
-
left : 10px;
-
top : 10px;
-
}
-
.Logo {
-
position : absolute;
-
left : 14px;
-
top : 14px;
-
height : 96px;
-
width : 96px;
-
background-image : url(../images/Jericho=Style2.gif);
-
overflow: visible;
-
z-index: auto;
-
}
-
.Navigation {
-
position : absolute;
-
left : 10px;
-
top : 106px;
-
width : 1024px;
-
text-align : center;
-
}
-
.Navigation a {
-
display : inline;
-
position : relative;
-
width : 125px;
-
margin : 3px;
-
padding : 3px;
-
text-decoration : none;
-
background-color : #0099ff;
-
color : #000000;
-
text-align : right;
-
border : thin solid #ffffff;
-
}
-
.Content {
-
position : absolute;
-
left : 10px;
-
top : 145px;
-
width : 1024px;
-
border : thin solid #ffffff;
-
}
-
-
Sign in to post your reply or Sign up for a free account.
Similar topics
by: Jeremy Epstein |
last post by:
I've got a 4-page form that lets users enter a whole lot of information,
which is then submitted and emailed at the end. All the fields are
stored as session data.
The whole thing works fine:
...
|
by: Geoff |
last post by:
When trying to focus a field in Firefox, I get the following error:
Error: " nsresult: "0x8057001e
(NS_ERROR_XPC_JS_THREW_STRING)" location: "JS frame ::...
|
by: expertware |
last post by:
Dear friends,
My name is Pamela, I know little about CSS,
but I would like to ask a question
I have an image on a web page within a css layer:
<DIV ID=MyLayer
STYLE = "position:...
|
by: expertware |
last post by:
Ok! to avoid confusion I will start a new argument.
Thanks!!
FIREFOX 1.0.7 AND IE6 viewed through DATATIME: a summary REPORT
===============================================================...
|
by: SPE - Stani's Python Editor |
last post by:
Hi,
During optimizing SPE for Ubuntu, I found something strange. I have
Ubuntu 5.10 "The Breezy Badger" and unfortunately this code is not
working:
>>> import webbrowser
>>>...
|
by: Coder |
last post by:
Hi I have the following code in java script, it is not giving proper
output in FIREFOX but running fine in IE... can anybody help me out to
make this run in FIREFOX .
<script...
|
by: amit |
last post by:
Hello group,
I'm kinda skeptical about a code is being used in my js program. All it
does is checking what browser is being run and finds out if FLASH is
installed or not.
This code works...
|
by: scotty |
last post by:
I have a script that loops through an existing table list and prepares
each href element node to trigger a function when an image is
clicked. The function that will be run passes a property value...
|
by: Carlos Mendonça |
last post by:
Has anyone managed to get ClickOnce to work with Firefox? It seems to me
that it still has the same issues VS 2K5 had.
I appreciate any comments or tips.
|
by: SAL |
last post by:
Hello, I did google this issue and found some stuff related to BrowserCaps
section of either web.config or machine.config but it didn't work.
It seems that most pages in my webapp are okay but a...
|
by: emmanuelkatto |
last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud.
Please let me know.
Thanks!
Emmanuel
|
by: nemocccc |
last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
|
by: Sonnysonu |
last post by:
This is the data of csv file
1 2 3
1 2 3
1 2 3
1 2 3
2 3
2 3
3
the lengths should be different i have to store the data by column-wise with in the specific length.
suppose the i have to...
|
by: Hystou |
last post by:
There are some requirements for setting up RAID:
1. The motherboard and BIOS support RAID configuration.
2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome a new...
| |
