/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] IE7 Problem again, position of banner

All browsers except IE7 show the site correctly.

I’ve tried some different css code, nothings working.

(See attachment)

[upl-file uuid=6516b606-b200-4ec6-8b40-ad8a8f781719 size=99kB]aod.zip[/upl-file]

to post a comment
CSS

11 Comments(s)

Copy linkTweet thisAlerts:
@WebJoelJul 03.2008 — Can you explain better what the problem is. I have your code on my desktop and cannot understand what you want or are trying to do. ?
Copy linkTweet thisAlerts:
@DragonkaiauthorJul 03.2008 — Well in IE7, the top banner is mislocated... basically just look at it in FF, and then look at it in IE7. The problem is that the IE 7 view does not look like FF's display.
Copy linkTweet thisAlerts:
@WebJoelJul 03.2008 — As near as I can tell, you seem to be using 'presentational image' as 'content'. I made the images "position:absolute;" and got them out of the document flow, and back into 'presentation' (how it looks), moved some stuff around, tried to make your folder/files appear in IE as they seem to in Fx. This now re-sizes a bit for smaller browser-widths...

[B]Changes[/B]:

[B]<style>



body, html {width:100%; background-color:black;}

</style>[/B]




</head>

<body>

<div id="pagewhole">

<div id="header">

<div id="topbanner" [B]style="position:relative; width:100%; margin:0 auto; background:#000 url(images/topbanner.jpg) no-repeat center 0"[/B]>
[B]<img alt="" src="images/leftban.png" style="position:absolute; left:0;" />
<img alt="" src="images/rightban.png" style="position:absolute; right:0;" />[/B]


<div id="toplinks">toplinks</div>

</div>
</div>
</div>[/QUOTE]
Copy linkTweet thisAlerts:
@DragonkaiauthorJul 03.2008 — Ah, so I put that into my html? Any changes I have to remove in my css? Or should I just copy paste what you did word for word? And then manipulate afterwards? Also, could you give me a screenshot of how it looks on your browser?
Copy linkTweet thisAlerts:
@WebJoelJul 03.2008 — Add this to your CSS file:body, html {width:100%; background-color:black;}[/QUOTE] as your VERY FIRST line, then:<body>

[B]<div id="pagewhole">



<div id="header">



<div id="topbanner" style="position:relative; width:100%; margin:0 auto; background:#000 url(images/topbanner.jpg) no-repeat center 0">

<img alt="" src="images/leftban.png" style="position:absolute; left:0;" />

<img alt="" src="images/rightban.png" style="position:absolute; right:0;" />



<div id="toplinks">toplinks</div>



</div>

</div>

</div>[/B]


</body>[/QUOTE]
the [B]BOLD[/B] replaces everything you have now between the "<body>" and the "</body>".

I am using your existing CSS document, although I removed a few HTML elements that now the CSS referances that no longer exists.



split-screen IE7/Fx3 view image, attached

[upl-file uuid=ea9dead5-9f51-42ab-9dfd-4d1a881a50d5 size=22kB]army.jpg[/upl-file]
Copy linkTweet thisAlerts:
@DragonkaiauthorJul 04.2008 — Huh... I just looked at your jpg...

and it's not the same...

This is how it looks in mine.


And you'll see a new thing on the bottom, cause I added it after this post.

[upl-file uuid=ede5b74e-a957-4fe8-9513-5237e3a40fdf size=89kB]Screenshot AOD.jpg[/upl-file]
Copy linkTweet thisAlerts:
@DragonkaiauthorJul 04.2008 — Oh, I did what you did.

But you changed the background color from red to black. When I changed it back the black color is left there as the height of the topbanner
Copy linkTweet thisAlerts:
@WebJoelJul 04.2008 — Because I was confused as to what you wanted to do. Did you get this working okay?

Changing the background-colors of various elements helped me to discern what what what, -and where. ? Very important to have [B]body {height:100%;}[/B] or preferably, [B]html, body {height:100%;}[/B].

It can solve many problems later on.. ?
Copy linkTweet thisAlerts:
@DragonkaiauthorJul 04.2008 — Yea it worked... but the problem is: The background color of the top was supposed to be black. But after the banner, and the two sides, it was supposed to be red color.
Copy linkTweet thisAlerts:
@WebJoelJul 04.2008 — "..[I]the two sides[/I].." -Do you mean those two left/right chevron graphics? They are supposed to be what, -red (that is really a difficult stretch to call that color "red"... I can *barely!* see the difference between that, and pure black...)
Copy linkTweet thisAlerts:
@DragonkaiauthorJul 04.2008 — Oh DW about it, I got it working. Just used your code and removed the height off the topbanner. Thanks for all your help.
×

Success!

Help @Dragonkai spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.24,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...