Table lines showing when viewed on mobile device
-
Hello,
Love the wp-table-reloaded.
I set all of my tables up to be borderless and have no lines. Everything looks great when viewed through Safari, Firefox, etc but when I view a page with a table on my iPhone or other mobile device the lines are revealed. How can I hide the lines for mobile viewing?
http://www.productpartnersonline.com (please see the table with images at the bottom of this page)
Thanks
-
Hi,
unfortunately, I don’t have an iPhone to check this and from what I can see in the browser, there’s nothing unusual 🙁
Are you maybe using a special theme for mobile devices? It might be that this theme is adding border lines to the table again…
Regards,
TobiasJust to let you know christopherhope/Tobias that I have used the css to remove borders from my tables and the lines do not appear on the iPhone.
I do have a small problem tho 🙁 I have placed a contact form and google map inside your table. I then adjusted the css for the tables so they look like this…
http://croftweb.co.uk/chasersec/?page_id=13
The problem is; when I view the page in google chrome / iPhone, the form’s styling goes all over the place…
http://croftweb.co.uk/chasersec/?page_id=13
I have tried just placing the form on the page, without any tables in both google chrome and the iphone, and it works correctly, so I am a little confused as to what the the table css is doing.
I would really appreciate it if you could help me.
Cheers
LiamHi Liam,
unfortunately, I also can’t see what is happening here 🙁 The code looks fine to me…
However, I suggest that you don’t actually use a table for this. In modern webdesign, tables should not be used for layout purposes (like positioning certain things next to each other), but only to show data that is in tabular form. For the layout/design, you should use
<div>elements with proper CSS applied to them, so that they show up next to each other. That would likely also fix your problem.Regards,
TobiasI had a feeling you would say that! That is one thing I really struggle with, getting things to line up on a page, it drives me mad! Any tips you have would be much appreciated 🙂
Cheers
LiamHi,
I don’t have specific tips, unfortunately, but you might try to look for ressources/books/tutorials using keywords like modern webdesign, or CSS webdesign or similar.
That should hopefully yield some examples on how to use the proper HTML elements for what you want to do and their correct use. I can also highly recommend to study the HTML source code of other websites (e.g. where you see an effect/stying that you like), and to also use debugging tools, like Firebug for Firefox or the Google Chrome Developer Tools in the process.Regards,
TobiasThanks to all.
Cheers,
Chris
Hi Tobias,
I thought I would revisit an issue that I am still having. I know you don’t have an iPhone so I took a screen shot of what i am experiencing on both my iPad and iPhone.
http://dl.dropbox.com/u/20061127/iPhone/IMG_2308.PNG
Hopefully this will help.
All the best.
Chris
Hi Chris,
thanks for the screenshot, but what exactly do you think is wrong there? Everything looks good to me… Am I missing something?
Regards,
TobiasHi Tobia,
Sorry about not clarifying. I have updated the screen shot with comments marked in red.
http://dl.dropbox.com/u/20061127/iPhone/IMG_2308%20copy.png
Essentially, on all of the tables I have created I have these faint lines marking the individual cells/borders. I followed your instruction and removed any mobile themes that might be affecting this.
Is this clearer now?
Thanks for taking the time to look at this.
All the best,
Chris
Hi Chris,
ah, thanks for pointing those out. Totally missed those when viewing your screenshot on my small screen. Sorry.
I’m not really sure where these are coming from, but (as weird as it sounds), you might be able to remove them by changing the background color of your table. Please try adding
.wp-table-reloaded-id-123 { background-color: #FFFFFF!important; }to the “Custom CSS” textarea on the “Plugin Options” screen, and change the ID to the correct one.
Regards,
TobiasWorked perfectly!!!!
Thank you so much.
Cheers,
Chris
Hi Chris,
no problem, you are very welcome!
Best wishes,
TobiasIs there somewhere I can donate $ ?
Thanks again.
Chris
Hi Chris,
thanks for wanting to donate, that is really nice. 🙂
There is a donate link (through PayPal) on my website at http://tobias.baethge.com
You can also find my Amazon wishlist there, but as it’s from the German Amazon, I’m not really sure if you are able to use it.Thanks again!
Tobias
The topic ‘Table lines showing when viewed on mobile device’ is closed to new replies.