Member Avatar for nitin1

Hi,

I have one CSS.

.buttonSize
{
    min-width : 58%
}

Actually, I have two buttons, with text "Hovers" & "Copy". My button without any css taking spaces which can wrap the text size. This way size of two buttons is not same.

What I tried:
a) I have hacked by adding two spaces to "copy" and tried. On some browsers, it worked fine but on mozilla it was taking little more space(as compared to hovers button).
b) I have added the css class above & added in the tags of the buttons. worked fine on all browsers on all OS(windows, Ios, etc.) but when I tried it on tabs or mobiles, it was behaving as if no css class is defined and it is just wrapping the no. of characters.

Can you please tell me some way where I can be very sure & can make code totally browser in-dependent & os independent?

Thanks in advance.

  • 2 Contributors
  • 3 Replies
  • 248 Views
  • 1 Hour Discussion Span
  • Latest Post Latest Post by rproffitt
Member Avatar for rproffitt

My first stop to see if there are issues is the Known Issues tab at http://caniuse.com/#feat=minmaxwh
So yes it appears that web browsers based on web kit may have issues. Try Chrome on that tablet or mobile.

Member Avatar for nitin1

My issue exist on all browsers of tablets & mobiles. but working fine on desktop browsers.

Member Avatar for rproffitt

Here's a thing. " make code totally browser in-dependent & os independent? " is something you know you never can achieve. We have to test for functionality but have to either let the display be a little off on a few machines or craft specific pages for specific classes of machines and browsers.

I must be upfront that I no longer will be dragged into the black hole of perfect pages across all devices. The amount of time and effort is too high. At the office we'll pick our targets and then go for that. Unless we sign up to do responsive web design. Which means the web page will by design not look the same on smart phone and PC!

That said you may have to get into responsive web design. Which is a step up from HTML and CSS alone.
https://www.google.com/#q=perfect+web+pages+across+all+machines

PS. Added with edit. I want to clarify the code is already cross machine and browser ready. Your goal appears to be the other end of the stick. You want the pages to render the same which is a slightly different question but I want to add that I get that.

Edited by rproffitt because: clarfying
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.