...

View Full Version : Content slides over header



sepunx2
11-24-2008, 07:24 PM
Hello!
I made a page using css and it works well in IE6, Firefox and safari, but in IE7 my content slips over my header with about 30 pixels. I fixed this by adding 30px bottom margin to my header, but in IE7 it didn't work, it stayed at the same place:(
Can anyone take a look at my coding please? Something must be wrong with my css...
thank you, here's the page
http://www.unionjackstudio.hu/MBT/index.html

sepunx2
11-24-2008, 08:22 PM
It seems to work now...
Great!
Solved!

Excavator
11-24-2008, 08:29 PM
Hello sepunx2,
Did you fix this? It looks the same on FF and IE7 here.

[edit]oops, didn't see your post.

sepunx2
11-25-2008, 06:16 PM
Hey!
Thanks for your reply!
I thought I fixed it, beacuse it works in IE7 and safari now, but I was wrong..
now it has a huge margin under my header in IE6.
In fireworks, the layout is ok, but my menu text is gibberish...
I just can not make this work on all of these browsers:(
So..help needed again:)
Thank you!

sepunx2
11-26-2008, 08:31 AM
Hi! I have a byte order mark in my index. I tried to take it out, but i just
couldn't. Could this be my problem?


Hello sepunx2,
Did you fix this? It looks the same on FF and IE7 here.

[edit]oops, didn't see your post.

abduraooft
11-26-2008, 08:53 AM
Hi! I have a byte order mark in my index. I tried to take it out, but i just
couldn't. Could this be my problem? Yes, most probably. Anything before the DOCTYPE will trigger IE in to quirks mode. Why couldn't you remove the BOM? Is your index page is a single file or created with multiple files (by server side linking)?

sepunx2
11-26-2008, 09:02 AM
Thanks for your reply!

Yes, most probably. Anything before the DOCTYPE will trigger IE in to quirks mode. Why couldn't you remove the BOM? Is your index page is a single file or created with multiple files (by server side linking)?

It is a simple html file, with a linked css file. BOM is new to me. I read about it's removal, they told me 2 options: 1. Change the format of the file in notepad++ to UTF-8 without bom... I tried, but all my text became gibberish 2. Delete EE BB ( something like that) from the beginning of the page... Tried, but couldn't find anything like this.
So i couldn't remove it. Should i start a new file in text editor and copy paste my codes? I used to edit this file in dreamweaver.... But no more DW

abduraooft
11-26-2008, 09:05 AM
Just open the simple notepad and copy all the markup into it and save it. (don't forget to take a backup first)

sepunx2
11-26-2008, 02:42 PM
Hi!
I could finally remove the byte order mark.
It works in IE7, Safari, Firefox
but in IE6 there is a 30px space under my header, over my content.
A lot of people still use ie6 here, that is why it is important for me to fix this.
Any other idea? Something may be wrong with my css layout?
Thank you

abduraooft
11-26-2008, 02:55 PM
Try to fix the errors in your markup, see http://validator.w3.org/check?uri=http%3A%2F%2Fwww.unionjackstudio.hu%2FMBT%2Findex.html&charset=%28detect+automatically%29&doctype=Inline&group=0

btw, what's the purpose of #leftcolumn there?

sepunx2
11-26-2008, 07:26 PM
Hi...
left column and right column are only there, because I couldn't make the effect I wanted without them (I wanted the header to be wider than the content..I know, css is new to me)
I've been trying this validation thing for days now, but it just gets worse..I can't do this.
For example: The validator said I needed alt for an image. I don't want alt for the image, but I inserted one, than the validator gave me even more errors. Than I tried to fix a few things following the html tidy code it gave me, but I got more errors again. I'm sure my coding is messed up, but it works in all browsers, except in ie6. I just wanted to fix the layout in ie6 too.
Validator says my code misses an ending somewhere..I checked, but the ending is right there...
in the end, all my text are formatted to gibberish and I cannot fix it, because my text editor does not offer ansi format for me...
What should I do?
I'm trying to learn validating, but it gets worse, I couldn't fix one problem for days now:(
is something wrong with my text editor (text wrangler for osx)?
thanks

sepunx2
11-26-2008, 07:37 PM
...now i figured how to change the format to ascii, the text is ok now, but the BOM came back again...I copy my code to another file, but it won't disappear..
I'm sure all this validation has nothing to do with my problem, because I've tried everything, but nothing got better...
If it has something to do woth validation, I need someone to explain the solutions for me, because I just can't fix an error:(
ok..I could remove my bom in another text editor...

sepunx2
11-27-2008, 08:56 AM
Is there a place where i can find common errors found by the validator fixed? So i can learn how to remove these errors?

abduraooft
11-27-2008, 09:05 AM
Most of the errors are due to some invalid characters!


<div id="header">

<img src="images/honlap1_02.jpg" ��/>


</div> What are they?

sepunx2
11-27-2008, 09:45 AM
Aha!!!!
I cannot see those characters at all!
Could you please advise me a text editor for mac?

Thank you

Avril
11-28-2008, 06:46 AM
Really good text editor for Mac: Taco at:

http://tacosw.com/

sepunx2
11-28-2008, 01:25 PM
Thank you, but a freeware would be much reachable for me.
Any other ideas?

194673
11-29-2008, 08:28 AM
Komodo Editor (not IDE)

sepunx2
11-29-2008, 09:28 AM
I need a FREEWARE editor for mac, which shows me all the weird characters in my coding...I tried like 5 editors by now, but non of them shows me the unwanted characters ABDURAOOFT was talking about.
Thanks

sepunx2
11-29-2008, 04:05 PM
Hey Abduraooft!
It's me again!
I reworked the whole thing, I managed to remove all validate errors, so now both my css file and html file is free of errors!
Sadly, I still have an issue..It works in safari and firefox, but in IE6 the whole content slides in the right direction with about 40 pixels. I needed to add 40px left margin to my container class, to place my studd into the right place...but it seems like this 40 px margin is my problem, because it works in ie6 without these 40 pixels.
I hope this was understandable, I give you the link again, thank you for your help:
http://www.unionjackstudio.hu/MBT/index.html

abduraooft
11-29-2008, 04:23 PM
Now it's very easy to work with. Have a try by

/*
#leftcolumn {
color: #333;
border: 0px solid #ccc;
background: transparent;
margin: 0px 0px 0px 0px;
padding: 10px;
width: 38px;
float: left;
}
*/
.container {
color: #333;
border: 0px solid #ccc;
background: #ffffff;
/*margin: 0px 0px 0px 58px;*/
margin:0 auto;
padding: 0px;
width: 813px;
/*float: left;*/
}

#leftmiddle {
color: #333;
border-right: 1px dashed #666666;
background: #ffffff;
margin: 0px 0px 0px 0px;
padding: 10px;
/* width: 500px;
float: left;*/
}
#rightmiddle {
color: #333;
background: #ffffff;
margin: 0px 0px 0px 0px;
padding: 10px;
width: 173px;
float: right;
}
/*
#rightcolumn {
color: #333;
border: 0px solid #ccc;
background: transparent;
margin: 0px 0px 0px 0px;
padding: 10px;
width: 38px;
float: left;
}
*/

<!-- Begin container -->
<div class="container">


<!-- Begin Right Middle Column -->
<div id="rightmiddle">

<img src="index_files/partnerek.jpg" alt="pic3">

</div>
<!-- End Right Middle Column -->

<!-- Begin Left Middle Column -->

<div id="leftmiddle">
a
aaaaaa
</div>
<!-- End Left Middle Column -->

<div style="clear:both;"></div>
</div>
<!-- End container -->
(Removed the leftcolumn and rightcolumn completely and changed the order of markup of right column and middle to apply float:right !)

sepunx2
11-29-2008, 05:02 PM
Thanks a lot!
A friend of mine told me, I should just place a display:inline to my container class... I tried and it worked for me. What do you think? Is this ok like this?
I'll try what you advised, I just need some more time.
Thank you again!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum