Jump to content


DarkxPunk

Member Since 07 Dec 2011
Offline Last Active Feb 17 2017 07:42 AM
-----

Posts I've Made

In Topic: Text Line I Can't Identify

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

In Topic: Text Line I Can't Identify

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.

In Topic: CSS Vertical Navigation

16 January 2017 - 02:25 AM

Couple things screwed up what you were doing... Did you build this step by step and watch what happened as you built it?

 

Spoiler

 

The height restricts the sub items from appearing causing overlap, then the position absolute causing all the flowing to overlap as well.

 

Hope this puts you on the right track.


In Topic: margin-right (and left?) not going to 0 when set to 0px

16 January 2017 - 02:11 AM

Your solution works, however that is not exactly what he was saying. The problem with using inline-block is that when the HTML is parsed it sees the line breaks (aka when you press enter to make a new line). This line break is parsed when using inline-block thus creating a space (that space being the line break). An even easier way to solve it without having to play around in CSS is simply remove the line break.

<!DOCTYPE html>
<html>
<head>
<style>
div {
    background-color: lightgrey;
    width: 50px;
    border: 25px solid green;
    padding: 10px;
}
</style>
</head>
<body>
 
<h2>Testing Margins</h2>
 
<div style="display:inline-block;">Box 1</div><div style="display:inline-block;">Box 2</div>
 
<br />
 
<div style="display:inline-block;">Box 3</div><div style="display:inline-block;">Box 4</div>
 
</body>
</html>

You can also comment out the line break.


In Topic: Padding not scaling correctly

16 January 2017 - 02:04 AM

Okay so I finally got a chance to play around with it again, tried px, rem, %, vw, and everything made it worst :facepalm: . Yes I know I am grasping at straws but I still don't understand what is going on...

 

First off I understand 1em = 10px, obviously because I set it that way. When I scale up a page or scale down a page (Command + / Command -) in FF or IE it scales as expected up and down, my understanding from that is it must be using page scaling rather than text scaling. Do I have that backwards? However Webkit browsers Safari or Chrome use text scaling, everything seems to increase in scale correctly but not decrease in scale properly. I am aware I am repeating myself. However if Webkit uses text scaling then shouldn't it be increasing the root font size aka changing 10px to Xpx based on my scale percentage? If I change the root font size manually it scales up and down no problem...

 

This is NOT a viewport issues... This is not a fluid design issue... This is an issue with page scaling/zooming.

 

I hope this better explains and clarifies what the solution should be...