Jump to content


Photo

Text Line I Can't Identify


  • Please log in to reply
4 replies to this topic

#1 DarkxPunk

DarkxPunk

    Member

  • Members
  • PipPip
  • 447 posts
  • Gender:Male
  • Location:Toronto, Ontario, Canada
  • Languages:HTML, CSS, Little JavaScript, Little PHP

Posted 10 February 2017 - 07:11 AM

Hi there,

 

Okay so this will sound incredibly confusing, but lets give it a try.

 

I made an email signature a while back for a customer, it functioned correctly. However I wanted to optimize and improve it for better appearances on mobile. I rewrote it, brought it into Apple Mail, and everything seems to break it. Adding text, attachments, replying, etc. I couldn't figure out why my new signature was not functioning like the old. Then I noticed this on the old signature:

 

weird.png

The purple is a highlight of some sort of text line... But I can't figure out where it is coming from in the code.

 

On I went, rewriting the email signature line by line to re create this text line... I couldn't do it. I absolutely can't figure out where this is coming from, but I am convinced this line is why the old signature works and the new one does not. It is providing some sort of separation to the email signature that prevents other elements from causing it to break. I have tried simulating it, recreating it, no luck...

 

Ill attach the code, but if someone can find out what this is you will keep me from going insane.

 

(Note I thought it was the margins too, however in the rewrite it does not create this text line)

Spoiler

 

Thank you for all your help. If I spend another 6h on this like I have been I am going to go nuts...


Edited by DarkxPunk, 10 February 2017 - 07:12 AM.

-Always learn where you came from before you try and make something of yourself.


#2 Sunamena

Sunamena

    Newbie

  • Members
  • Pip
  • 50 posts

Posted 15 February 2017 - 05:13 PM

There is no CSS for a screen larger than 470 pixels if i see this correctly.

You are also working with inline css and obsolete table sub tags such as border="0" cellspacing="0" cellpadding="0".

 

CSS gets read like this:

Use inline CSS
Else
 Use the css in the head
   Else
       Use the css in the linked file.

Maybe that is what is creating the conflict?



#3 DarkxPunk

DarkxPunk

    Member

  • Members
  • PipPip
  • 447 posts
  • Gender:Male
  • Location:Toronto, Ontario, Canada
  • Languages:HTML, CSS, Little JavaScript, Little PHP

Posted 15 February 2017 - 05:45 PM

I have played with the different styling methods just to be sure, I can't replicate. However this is an email signature so I need to keep everything inline and cover old styles for older email clients.

Thanks for the tips, if you have any further direction it's appreciate.

-Always learn where you came from before you try and make something of yourself.


#4 Ingolme

Ingolme

    Foxy Mod

  • Moderator
  • PipPipPipPipPipPipPip
  • 12,735 posts
  • Gender:Not Telling
  • Interests:Web development, drawing, videogames, foxes.
  • Languages:Javascript, PHP, MySQL

Posted 15 February 2017 - 07:11 PM

Coding for emails is very different than coding for a website. You have to use old attributes and inline CSS to get it to render properly in email clients.

Experienced web developer and artist. Forum moderator at W3Schools.com and SEGA.com

kya_signature.png


#5 DarkxPunk

DarkxPunk

    Member

  • Members
  • PipPip
  • 447 posts
  • Gender:Male
  • Location:Toronto, Ontario, Canada
  • Languages:HTML, CSS, Little JavaScript, Little PHP

Posted 17 February 2017 - 07:40 AM

So surprise surprise I finally figure it out on my own, and I am actually surprised at what it is.

 

So I kinda was wrong kinda was right about its not being the margins... It isn't the margins, but the margins cause it to appear... Its in fact cellpadding/padding...

 

Now logically this shouldn't make sense but welcome to ancient html logic. Even though I have cellpadding set to 0, by having padding on the TD it turns it back on... regardless where the padding is... Then the margins is extending the open area between the cells and thus this line appears... And this line causes content to break below it if you try to place text beside it. It is messed up and makes no sense, but it works!

 

Now since I have this understanding I decided to redesign it and post my optimized version here, open for any suggestions:

Spoiler

-Always learn where you came from before you try and make something of yourself.





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users