hi,

I recently installed drupal 6.3 and this great theme nitobe.
but i'm encountering some strange behaviour of this theme in different browsers.
I only use FF, so here everything looks just fine - pls check attached file FF.png

but in IE - it looks different - check file IE.png and IE1.png
1. the image next to the text is in the different position - it should be on the right of the text like in FF
2. bulleting in right menu - as you see menu items are very close to the bullet, in FF it looks OK
3. coding - the text in screenshot is Polish, encoding UTF-8 - as you can see in IE1.png the text looks strange, and Polish diactrics (ę, ą, ś, ć) are in some different font?

why does the same page look different in FF and IE?
unfortunaltely I cannot discard IE issues as I suppose most viewers coming to the site is using IE.

any clues on how to fix this?
change fonts in css file?

thanks
rafal

CommentFileSizeAuthor
IE_1.png48.64 KBwankus
IE.png75.47 KBwankus
FF.png66.51 KBwankus

Comments

Anonymous’s picture

Anonymous (not verified) commented
Component: Miscellaneous » Code
Assigned: Unassigned »
Category: support » bug
Status: Active » Postponed (maintainer needs more info)

I will probably separate this into multiple issues after some investigation.

  1. What version of Internet Explorer are you using?
  2. Could you paste the HTML code for the node (just the node, not the whole page) that contains the misaligned image? Or do you have a live example I could look at? It's hard to debug CSS from just a screenshot.
  3. The bullets in the unordered list is something that I need to add to the IE style sheet. I think I've seen this issue before.

The font issue I'm not sure about. My suspicion is that because I have the Linux fonts at the beginning of the font family list, Internet Explorer is performing a font substitution instead of looking at the whole list. The body element in text.css currently looks like this:

body { 
    font: 13px/1.5 FreeSans, "Liberation Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

Try this to see if it fixes the problem:

body { 
    font: 13px/1.5 Arial, "Helvetica Neue", Helvetica, FreeSans, "Liberation Sans", sans-serif;
}

There will be doing more Internet Explorer testing going forward. It also appears that I need to add a test case for non-English characters.

Thanks!

wankus’s picture

wankus commented

hi,

thanks for your reply.

3. starting from the last one - yes, you're right - changing font oder in text.css fixed the issue.
it now looks OK in IE. cool :)

1. the version of IE - 7, i didn't check in IE 6
2. the site is offline, so I'm pasting the HTML code of the node:

<h1>Marketing w firmie<img height="230" alt="" width="300" align="right" src="/userfiles/image/grafika/img1.jpg" /></h1>
<p><strong>nowyPOZIOM</strong> - to agencja marketingowa, kt&oacute;ra wychodzi naprzeciw potrzebom średnich i małych przedsiębiorstw, kt&oacute;re z r&oacute;żnych względ&oacute;w nie chcą inwestować w tworzenie wewnętrznego działu marketingu. Dla takich firm przedstawiamy ofertę kompleksowych usług, taki jak:</p>
<ul>
    <li>marketing precyzyjny - traf ze swoim przekazem do precyzyjnie obranej grupy docelowej</li>
    <li>kreacja i zarządzanie marką, wizerunkiem firmy, wśr&oacute;d klient&oacute;w i na rynku</li>
    <li>marketing internetowy</li>
    <li>tworzenie serwis&oacute;w WWW</li>
    <li>analizy i badania rynkowe</li>
    <li>doradztwo strategiczne</li>
    <li>konstrukcja budżet&oacute;w marketingowych</li>
</ul>
<h2>Nowe możliwości dla Twojej firmy</h2>
<p>Rozumiemy, że zadaniem Twojej firmy jest <strong>generowanie zysk&oacute;w</strong>. Aby to osiągnąć musisz skoncentrować się na podstawowej działalności. Z drugiej jednak strony - obecny rynek jest niezwykle konkurencyjny i wymagający, klienci są coraz bardziej świadomi swoich wybor&oacute;w i dlatego nie wystarczy mieć dobry produkt. Trzeba go jeszcze <strong>wypromować i sprzedać</strong>. Jeśli nie decydujesz się na tworzenie wewnętrznego działu marketingu a chcesz, aby Twoja firma była <strong>zauważalna i konkurencyjna</strong> na rynku możesz zaufać profesjonalistom z agencji <strong>nowyPOZIOM</strong>:</p>
<ul>
    <li>możemy tworzyć <strong>zewnętrzny dział marketingu</strong> Twojej firmy</li>
    <li>wnosimy <strong>powiew świeżego powietrza</strong> do Twojego biznesu</li>
    <li>nasze wynagrodzenie jest w całości Twoim kosztem uzyskania przychodu</li>
    <li>nie musisz angażować własnych środk&oacute;w w inwestycje związane z działalnością marketingową</li>
    <li>dajemy Tobie &quot;<strong>perspektywę planu helikoptera</strong>&quot; na Twoją firmę - jesteśmy specjalistami &quot;z zewnątrz&quot;, potrafimy obiektywnie spojrzeć na firmę i procesy w niej zachodzące</li>
    <li>przeanalizujemy rzetelnie Twoje mocne i słabe strony - przeprowadzimy obiektywną <strong>analizę SWOT</strong></li>
    <li>stanowimy wsparcie przy podejmowaniu <strong>strategicznych decyzji</strong></li>
</ul>
<p>&nbsp;</p>

thanks for your effort!

Anonymous’s picture

Anonymous (not verified) commented

I've created a separate issues for the bad font list and the bullet points:

On the image problem:

<h1>Marketing w firmie<img height="230" alt="" width="300" align="right" src="/userfiles/image/grafika/img1.jpg" /></h1>

I think with this issue Firefox is just being more forgiving than Internet Explorer. There are two possibilities I see here:

  1. Try placing the img tag outside of the h1 element. The h1 element is a block level element, and in this case, Internet Explorer is doing the right thing and expanding the block to include everything inside it.
  2. The align= attribute is deprecated. Images should be aligned left or right by floating with a CSS class. There's are classes for doing this in style.css. Try removing the align="right" and replacing it with class="floatright".

On a web semantics, accessibility, and search engine note, there should only be one h1element per page. The site title at the top of the page already uses a h1 element. If you're just trying to make the size of the text larger, use a CSS class specifying the font size.

wankus’s picture

wankus commented

thanks a lot,

your hints resolved the issues.
images is now displaying in IE as in FF, so how they are supposed to. they have to be CSS aligned. too bad you cannot fully use WYSIWYG (fckeditor) and have to manualy align objects, but this is not a major problem.

so right now everything is solved except of those bulletting in IE.

rafal

Anonymous’s picture

Anonymous (not verified) commented
Status: Postponed (maintainer needs more info) » Closed (fixed)

I'm marking this one as closed since the bullet issue is now separate: #297595: bullets render differently in Internet Explorer