Jump to content

DarkxPunk

Members
  • Posts

    465
  • Joined

  • Last visited

Everything posted by DarkxPunk

  1. 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.
  2. 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!
  3. 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!
  4. 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...
  5. 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!
  6. 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!
  7. 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.)
  8. Hey there, I am playing around with making a header responsive and running into something that does not seem to be expected... HTML: CSS: So what I expect is this, as I shrink down the width of the page, as the nav hits its minimum limit the logo should then start to shrink down, however instead the nav wraps and falls below... Now I did attempt to do no-wrap, but no luck... Any ideas?
  9. Wow dsonesuk... Works great! I am going to dissect your code as I should to gather all the ins and outs, but wow, it really works... Will comment however, the background-attachment: fixed is there for a very specific reason, it creates a cool scroll effect as the sections go by. I know it can be a little laggy on some browsers, but I have yet to find it too jarring yet. Thanks for the suggestion however. Next (dear god) I feel like such a scrub... I should know better about width 100%... I have been doing this long enough to know better. *slaps self* Thanks again for all the help!
  10. dsonesuk... I used some of your code... But I am still lost... I ended up using calc... However I still wanna find a better way! Now that I got the page working as I want it ill attach the new (cleaner?) code. See if we can find a way to get rid of those calc's. Here is the page: http://www.testzone.ormt.ca/raznoRenovation.ca/index4.html HTML CSS --Edit-- Let's try and update the code before anyone can notice... Shhh... If you are reading this, you win!
  11. I think the calc will solve the issue, gotta play with it. With the 100vh+10rem I assumed that would be the case, but why does it stop the scrolling, if its bigger id assume it would just let me scroll further. I will play with this and probably repost the updated code if I have more issues, if anyone can think of a more "backwards compatible" alternative to calc that will solve the issue as well, I am all ears. Thanks for the promising suggestion!
  12. Hi there, To get started my code: HTML: CSS: Okay so, I am trying to create this page, and everything looks absolutely great, until... You get to the last section. For some reason there is a stop and it won't scroll any more to fill the entire screen (aint that kinda the point of VH?). Next I am trying to find a way so that the content does not cause reflowing issue as you shrink the window... I can't tell why the section will shrink smaller than the content... Last if we can solve all that with no major issues, can we make it so that even though it is set to 100vh, that it actually appears a little smaller so it scrolls seamlessly between sections (because the header takes up some space). I have tried smaller than 100vh, but then I get weird problems are certain resolutions showing the background below everything... I have been banging my head for over two hours and just need a fresh pair of eyes. Thanks for any help!
  13. Thanks dsonesuk, Sadly however this stuff can't be hidden in the head/style because well some old email clients do not read that. It however does get used for some modern tweaks I gotta do for smart phones, except again however, can't be hidden in the head... Sigh... But all your little tweaks and extra redundancy helps! Once I have taken everything and make it solid ill post the skeleton here. For people reading this in the future *yay time travel* don't disregard the redundancy! Old browsers and email clients used by ancient companies need everything inline, and redundant to ######, just so it does not throw up a massive logo, or text decides not to line up, which on a profession level looks sloppy. But I hope one day we move forward and evolve past this... Final Template:
  14. I feel you dsonesuk, I feel you.
  15. Hey Rickholcomb, Don't fear TextEdit too much, it just needs a little wrangling, plus if you are not at your home computer and need to do an edit it may be good to know how to fix TextEdit.
  16. So my fears were correct about opening it up in IE... Does not even stay inline IE 9 and back... Now I know for web design I should be laughing at that archaic tech, but sadly some old email clients are still using IE 6 rendering engines (shiver). Any idea how to get this to flow properly back then anyone? I tried even align left (which works in other browsers, but screws up the valign, but no go in IE... ---Edit--- Oh oh oh! I am so giddy! Finally found the solution here: https://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/ Obviously this is a mix of everything and my signature template is not final, but it has come a long way! Here it is for everyone else: Please make note everyone that even though a lot of this will work sans redundancy, it is required for old stupid email clients, aka if your client has not updated their systems since Outlook Express was invented, and trust me, that is a thing... *shivers* Will post further once with complete redundancy.
  17. So I figured why I don't see it in Chrome nor Safari (though how they are processing them after the fact makes absolutely no sense), it seems they are not following my rule as a inline but rather a inline-table... That fixes the sizing issue, even in FF, but not the positioning. It seems that I need the inline-block + vertical-align for it to work in FF, and just the valign middle for Safari/Chrome... I am scared to open this in IE
  18. Huh. You learn something new everyday. I personally can't see it in chrome, nor Safari, in both of them they seem to be sizing as I would expect them. However is firefox I do definitely see it. Thanks again, will play around with this. And we all miss something eh?
  19. Hey, Playing around with inline-block, vertical-align, valign on the tables themselves, I finally got them all to valign middle themselves, yay! However using inline-block or inline was not important. Also inline-block did not solve the strange positioning issue (though is has been circumvented with the valign, vertical-align stuff) Could you maybe further explain this shrinking issue (I can't seem to pin point it using web inspector). It would be nice to know, to solve this in the further if I just wanted to inline them without the align/valign. Thanks again for all the help! The issue at hand is having the content flow on smaller displays, sadly placing in a td in the outer table prevents that and rather keeps the image on the left rather than the top, but good suggestion for making them align!
  20. Hi there, Let me preface that I know the way this is being done is probably completely incorrect and taboo. Reason I am doing this is because it will be used as an email signature. With much research about these, and the fact that this signature could be posted to old email clients, I need it to be incredible basic. This lets the signature display correctly on legacy machines to smart phones, so please bare this in mind. The code in the spoiler as you can see when displayed in a browser does not align all three tables, if I replace the image with text, it then aligns. It does not matter which order the image is placed. Now my intent however was by making these display inline, I would then be able to valign them to the middle. I know if I align left all the tables it will flow correctly, but the valign does not work... No matter how much I toy I cannot achieve this. Any ideas on a solution is appreciated. Thanks!
  21. True... Well once I am done skimming again I will update this thread. Any ideas on possible explainations in the mean time are welcome.
  22. That is the odd thing. I have at one point tried reducing the file by leaving only 10 000 then 5000 then 1000 but it made no difference with this specific database. Is it possible there is a character or line break that could be causing the issue? I will again try skimming the file, just to be sure, but thought I would bring my past experiences.
×
×
  • Create New...