Please help make site render in IE!

[amin]

I just did a redesign on my photography site, which is gear oriented with a focus on high-end compact cameras. I don't know anything about web site design and basically tried to modify a free Blogger template by playing with various values in the HTML. I got it to look halfway reasonable in Safari and Firerfox on the Mac, but it looks horrendous in IE on the PC. The picture at the top doesn't even come close to lining up. The site is http://www.seriouscompacts.com. Is there a WYSIWYG app to which I can download this HTML, work on it, have it checked for compatibility with all browsers, and then upload it back to Blogger? If anyone can tell me how to fix this or point me in the right direction, I'd really appreciate it.

 

[notnek]

You could download Nvu for free to work on it. Since I don't own a Windows box and don't want to run a virtual box, I user Browsershots.org From there you can get screenshots of your page on pretty much every browser known to man. Hope this little bit of info helps.

 

[EvilDog]

I just did a redesign on my photography site, which is gear oriented with a focus on high-end compact cameras. I don't know anything about web site design and basically tried to modify a free Blogger template by playing with various values in the HTML. I got it to look halfway reasonable in Safari and Firerfox on the Mac, but it looks horrendous in IE on the PC. The picture at the top doesn't even come close to lining up. The site is http://www.seriouscompacts.com. Is there a WYSIWYG app to which I can download this HTML, work on it, have it checked for compatibility with all browsers, and then upload it back to Blogger? If anyone can tell me how to fix this or point me in the right direction, I'd really appreciate it.

First of all, this is that happens when you dive into an existing coded page and try to tweak it to suit your needs. There are so many dependencies in what you are working on it is a giant can of worms. Not only that but it is some of the ugliest code I have ever seen in my life.

Anyway, I think you can get what you are looking for by loading up your page in a text editor that shows line numbers. (If you don't have one, then you really need to get one, because without this you are really working in the dark.) Assuming you are able to load up your document in such a text editor, remove the following lines from the page and your image will drop down to where you want it.

180, 181, 183 thru 194

My advice is to not delete the lines at first but to tab indent them instead. Then once all the offending lines are tab indented, then delete them as you will have marked them with the tab indent in this fashion. This way you won't get confused by the line numbers changing on you when you actually delete each line.

This won't begin to correct all that is wrong with the page but will get your image placed properly, quick and dirty like.

Hope this helps . . .

 

[amin]

Thank you both very much for your help! EvilDog, I pasted everything into Crimson Editor, which displays line numbers, and deleting those lines didn't do it for me. Would you please tell me what line 180 begins with so I can figure out how my lines match up with yours? Thanks again. I hear you about the code ugliness and all, but I don't know what else to do about it.

 

[EvilDog]

Thank you both very much for your help! EvilDog, I pasted everything into Crimson Editor, which displays line numbers, and deleting those lines didn't do it for me. Would you please tell me what line 180 begins with so I can figure out how my lines match up with yours? Thanks again. I hear you about the code ugliness and all, but I don't know what else to do about it.

Here are the lines to remove as indicated by a leading *

*<div class='header section' id='header'><div class='widget Image' id='Image1'>
*<div class='widget-content'>
<img alt='' height='110' id='Image1_img' src='http://bp3.blogger.com/_LMV40M_lPGA/R9mwYZuzg_I/AAAAAAAAAIw/AnETIgmXvas/S1600-R/Picture%2B2.png' width='1014'/>
*<br/>
*</div>
*<div class='clear'></div>
*<span class='widget-item-control'>
*<span class='item-control blog-admin'>
*<a class='quickedit' href='http://www.blogger.com/rearrange?blogID=2154031113464112654&widgetType=Image&widgetId=Image1&action=editWidget' onclick='return _WidgetManager._PopupConfig(document.getElementById("Image1"));' target='configImage1' title='Edit'>
*<img alt='' src='http://www.blogger.com/img/icon18_wrench_allbkg.png'/>
*</a>
*</span>
*</span>
*<div class='clear'></div>
*</div></div>

A couple of things to note - be absolutely certain that you have word wrapping turned off in your code editor as this will screw up the line numbers big time! Also, you will see that your image tag is in line 182 which is the one line you need to keep in the page, obviously. The line that contains a link to blogger.com will likely be word wrapped in this forum but not in your code editor so try not to let the difference confuse you. Just remove the entire line as you see it in your code editor.

 

[amin]

Again, thanks so much for your help. I cannot find any lines to match what you have written here. The closest I found was the following:

<div id='header1'>
<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>
<b:widget id='Image1' locked='false' title='' type='Image'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_img"' expr:src='data:sourceUrl' expr:width='data:width'/>
<br/>
<b:if cond='data:caption != ""'>
<span class='caption'><data:caption/></span>
</b:if>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>
</div>

Is that the part corresponding to what you copied? There is another area before that where if I cut out different pieces I can get it to fall in place in IE but it creates big gaps in Firefox. That section looks like this:

#header1{
height:110px;
margin:0 1px 1px 1px;
background:#ff3300;
color:#ffffff;
}
#header{
height:110px;
padding:0;
margin:0px 1px 1px 1px;
background:#ff3300;
color:#ffffff;
}
#header1 h1{
padding:35px 0 0 20px;
font-size:2.4em;
background-color:inherit;
color:#ffffff;
letter-spacing:-2px;
font-weight:normal;
}
#header1 h2{
margin:10px 0 0 20px;
font-size:1.4em;
background-color:inherit;
color:#ffffff;
letter-spacing:-1px;
font-weight:normal;
}

 

[EvilDog]

This will probably be the simplest thing to do after looking at the code some more. Find the line of code that references the image of the camera that you have at the top of the page. It contains the filename 'Picture+4.jpg' inside of it. After the image tag, on a new line, you will see a <br/> tag. Remove this tag completely.

The reason for this is that Firefox ignores <br/> tags if they are the last item in either a <div> or a <td> element. (Yes, this is stupid but that is how it is) IE, on the other hand will add the extra space that the <br/> is calling for which accounts for most of the space below your image in your page. (Score 1pt for IE getting it right in this case)

Next take the </div> tag that is just below that and put it at the end of the same line as the image tag. This is important, you do not want this </div> tag on a line by itself. You want it to be at the end of the same line as the image tag and there must not be any space between the two.

do it like this -

<img src=...></div>

NOT like this -

<img src=...> </div>

and NOT like this either -

<img src=...>
</div>

Firefox doesn't care if the closing </div> tag is on a separate line from the image tag and won't add any extra space under the image. IE, on the other hand, will add a small margin of space if the closing </div> tag is on a new line below the image. This is why I am having you put the </div> tag on the SAME LINE at the end of the image tag for the camera photo. This is because IE incorrectly will assume that the new line character counts as a space and treats it as such. (Score 1 pt for Firefox in this case!)

All in all, you are just touching the tip of the iceberg when it comes to getting pages to work equally in IE & Firefox. It is tough and it can be done but it also takes a lot of experience and periodic head banging to pull it off! The way I typically do it is to keep my codes as simple as possible and NEVER EVER use page layouts that I find on the internet such as what you have your page based on. You are only asking for a world of pain in doing so!

Hope this helps -