• Content count

  • Joined

  • Last visited

  • Days Won


DarkxPunk last won the day on December 9 2012

DarkxPunk had the most liked content!

Community Reputation

13 Good

About DarkxPunk

  • Rank
  • Birthday 03/25/1994

Previous Fields

  • Languages
    HTML, CSS, Little JavaScript, Little PHP

Contact Methods

  • Website URL
  • Skype

Profile Information

  • Gender
  • Location
    Toronto, Ontario, Canada
  1. Hey there, So I am toying around with a slideshow sort of display and discovered a strange result when I use position absolute in conjunction with overflow hidden on its parent. If any of you know why this is happening Id love to know, and possibly either a way around it or a better overall solution, that be great! To explain the issue I left it as overflow visible so you can see how it should function in theory, then you can see how it breaks when I attempt to hide it. HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="description" content="Slideshow Test"> <base href=""> <title>Slideshow Test</title> <link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen" charset="utf-8"/> <link rel="stylesheet" href="css/fonts.css" type="text/css" media="screen" charset="utf-8"/> <link rel="stylesheet" href="css/slidertest.css" type="text/css" media="screen" charset="utf-8"/> </head> <body> <header></header> <section> <ul> <li> <a class="imageAnchor" href="#test-image-one">&#8226;</a> <a class="imageAnchor" href="#test-image-two">&#8226;</a> <a class="imageAnchor" href="#test-image-three">&#8226;</a> <a class="imageAnchor" href="#test-image-four">&#8226;</a> </li> </ul> <div class="gallary"> <div class="container"> <div id="test-image-one" class="image"></div> <div id="test-image-two" class="image"></div> <div id="test-image-three" class="image"></div> <div id="test-image-four" class="image"></div> </div> </div> </section> <footer></footer> </body> </html> CSS: html,body { background-color: #363434; } a { color: red; text-decoration: none; } ul,li,.imageAnchor { list-style: none; display: inline-block; vertical-align: middle; } .gallary { width: 120px; height: 120px; position: relative; background-color: maroon; overflow: visible; } .gallary .container { width: 1000px; position: relative: } .image { width: 50px; height: 50px; margin: 35px; background-color: grey; display: inline-block; position: absolute; left: 120px; transition: left .1s linear; } #test-image-one { background-color: pink; } #test-image-two { background-color: green; } #test-image-three { background-color: purple; } #test-image-four { background-color: blue; } .image:target { left: 0; } Thanks for any help!
  2. 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:
  3. 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.
  4. 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: 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) Thank you for all your help. If I spend another 6h on this like I have been I am going to go nuts...
  5. Couple things screwed up what you were doing... Did you build this step by step and watch what happened as you built it? 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.
  6. 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.
  7. Okay so I finally got a chance to play around with it again, tried px, rem, %, vw, and everything made it worst . 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...
  8. 1) Yes I should add that, but do you think that will actually help with the browser and its math? 2) Doesnt WebKit scale by modifying the root font size? Thus shouldent everything scale evenly? Because what is strange is the padding on the top and bottom seems to scale but not the left. I guess I can try percentages but gonna be a pain. 3) I am not sure what this relates to? Keep in mind it's the left padding that won't scale down. Thanks for the thoughts and ideas.
  9. Hey there, So I am playing around with different ways to display a logo and using padding to move around text. Everything looks great, except when I try and scale down the page (zoom out). At about 80% in either Safari or Chrome the padding seem to not scale down... I can scale up and keep everything correct... Note I am using normalize.css and thats it. CSS HTML Thanks for any ideas as to why this is happening and/or how to get around it!
  10. Hey there, Let me preface that apparently this is impossible, but maybe someone will have an alternative. Here is a small incomplete snippet of code, don't worry you really don't need it all. <article id="services"> <div class="imageSwitcher"> <span class="imageSwitcherBox livingroom"> </span> <span class="imageSwitcherBox livingroom"> </span> </div> <div class="background doors2"> </div> Basically what I need to do is when I hover over the imageSwitcherBox it will change the background of the class background... Now I can't take the imageSwitcherBox s out of the imageSwitcher because I need that for positioning... What can I do to achieve my goals? If you need more code let me know... Thanks!
  11. So I am playing around with font-face and everything works fine, I start a new project and literally copy and paste the same font css file, updating the font location for the new fonts. It loads the normal font, but none of the variations when called. See here: What am I missing? If you need the main css file let me know...
  12. All fixed Thanks again.
  13. Thanks again to both of you for all your help! I think I have finally got it where I want it, please feel free to check my code and yell at me if I am still making boo boos. HTML: CSS: Yay!
  14. Hey, So I got this to show you: As you can see on the left you have the menu sliding in form nowhere in Safari and on the right sliding in from under the header in Firefox (the desired effect). Attached is my code if anyone can figure out why the massive difference and how I can fix this... I have been toying with z-index and it seems to do nothing. HTML CSS Thanks for any help!
  15. Hey everyone, I made a cool little pure css hamburger button with a transition to a cross or x. Thought I would share it and open it up for improvements you guys can make. (If anyone thinks using borders is better, it is not, it displays incorrectly in Firefox.)