Table lines showing when viewed on mobile device

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,
Tobias

Just 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…

https://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…

https://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
Liam

Hi 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,
Tobias

I 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
Liam

Hi,

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,
Tobias

Thanks 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.

https://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,
Tobias

Hi Tobia,

Sorry about not clarifying. I have updated the screen shot with comments marked in red.

https://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,
Tobias

Worked perfectly!!!!

Thank you so much.

Cheers,

Chris

Hi Chris,

no problem, you are very welcome!

Best wishes,
Tobias

Is 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 https://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