seo Question posted in
Some basic information to get you started with this can be found here.

Header image not displaying at same size in firefox and chrome – SEO

I am placing live text from an exported excel document as html, into an old pdf location for seo purposes. I believe the page was originally created as a wordpress template, and is an aspx file which is annoying because it has so many stacked divs.

At first I tried to embed the html document into the pdf location as a reference file, but it was displaying horrible for responsive, so I pasted the inline table data and now it’s displaying and functioning mostly properly. I lost some formatting css due to pasting it inline and most likely that is the reason.

However the issue I am having now is with the header image displaying differently in firefox and chrome.

Here is a code snippit for the image:
<img src="/imgs/dev/LILACheader.jpg" alt=“Lilac” class="img" style="margin-top:25px; width::100%; max-width: 100%; border: none;>

When I use the above it renders correctly in Chrome and not Firefox, but when I add this to the inline styles:
height:auto; and/or vertical-align:middle;

then it’s right in FF and not in Chrome.

Help! The table width is 1007px and I have made the image header 1007px as well but I cannot get it to work for both! I have a feeling it is from the extra pixels in the table border data but I can’t seem to fix the issue.

Page in question: http://www.michells.com/perennials

Thanks!!

ps I have 2 screenshots I tried to attach or link but I don’t think I have enough rep yet, so I can’t even post hosted ones either. lol

firefox

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    The img tag was outside the table, but inside the container. Clearly Firefox has some innate border or margin properties to clear, so I was able to span full width by putting the img tag INTO the table and then adding inline style properties. Once it was INSIDE the table I changed full width (1007px) to 100% and it responds appropriately now.

    When the image was outside the table it was adhering to PAGE and container properties, as now it functions properly due to using the TABLE properties from being inside an actual cell.

    Hopefully this can help someone else before they get stuck like me. cheers


  2. 0

    I’m not exactly sure of the issue of why the PX were not displaying right even with padding and margin equaling 0. But I have got something that will resolve the issue with FF not able to process the dimensions right.
    The code below will show you how to setup:

    <center> !--You put inside your exciting center tag-->
<div id="table-stylesheet">
!--This is where your table and Table header Image is going to be-->
</div>
</center>

    Then in your CSS just simply add this:

    #table-stylesheet{
width: 1007px;
}

    After that’s all completed refresh FireFox make sure the StyleSheet was updated and you should see that the Header image is now flush with the table.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search