Text on website moves in firefox - html

I have almost finished my portfolio page , but on one of my pages I have a error when displaying on firefox , on the http://www.jn-design.co.uk/about.html page the skills section on the right has moved a paragraph of my text (The cv lines). This is not a issue within any other browsers , just firefox!
Any help would be greatly appreciated!

It actually looks fine in Firefox but is broken on Chrome. Anyway, try adding a "clear: both" style to the last paragraph that contains the cv lines.

Related

<a href> not working only on cellphones

This code works on all desktops and tablets, in every browser, but for some reason I cant find, it is not working on cellphones, android or apple!
I cannot even select the text on cellphones..
<div class="inner-content block-content-style-2">
<a href="index.php/fr/services-fr/moule">
<div class="icons-molding"> </div>
</a>
<h3 class="title">Conception</h3>
</div>
I tried moving the href to a couple of place, but didnt change anything, but anyways, even if it is not a link, i should be able to select the text when using a cellphone
I tried to add a href inside the h3 tag for mobile to click on it, but it is not working either.
you can try it live here: http://www.qualiplast.com
On desktop or tablet, it works just as intended, but not on any cellphone.
Thanks for helping me out.
There is a div with an id of 'avatar-body-middle-block' that is appearing above the links on mobile, and preventing them from being clickable. Remove (or more likely hide) this div on mobile and the links will work.
I faced the same problem. Here's how I solved it in my case.
I tried inspecting on the 'a href' element. Turns out that some other element shows up in the developer console. After some pondering, I realized that some other div element was showing up above my link.
After reading through the css styling for the overlapping element and disabling the overlapping css command, the link started working for me. (float: none had to be deleted in my case, from an overlapping div)
Hope this helps someone else out there

Strange behavior of a dotted list under some text in Chrome

I have a strange behavior with a dotted list under a text. The problem appear only with Chrome browser (I have tested it also with Firefox and IE and this problem not present)
If you open this example link using Chrome you simply understand what is the problem: http://onofri.org/example/example3/test2.html
Under the Main Report box there are 3 boxes. The problem appears into the third box named Work Supported by Japanese Trust Found
Ad you can see under the informative text there is a list of links.
The problem is that if I open it with Chrome browser the dot of the first li element appear on the right of the link and not on the left !!!
Why? What is the problem? How can I solve it?
Tnx
Andrea
It's because <p id="smaller"> is set to float:left. Set it to float:none.
It is because the text above Our work is supported... has the style float:left - if you delete this style it will work as expected. Hope this helps.

Horizontally align images within a div

Would like to horizontally align multiple images and have them flow down the page if there are too many. (This is a mini gallery in the middle of a wordpress post).
After trying multiple code variations found on this site, I still can not get it working. However it works fine at JSFiddle...
Links needed here here:
Working code at JSFiddle
Non-working code at my website (even though the exact same code is being used as above).
Is anyone able to assist me as to what's going wrong?
*HTML and CSS are evident in the first 'JSFiddle' link
*Using latest version of wordpress
PROBLEM SOLVED: (can't answer my own question for another 8hrs due to being new)
There is Auto Formatting and AutoText in wordpress that was automatically adding 'breaks' to the end of my image hyperlinks.
Added ".photographs br {display: none;}" to the CSS and it works fine!
You have <br> tags in between your images. Remove them and it will fix itself.
remove <br/> in your code.
PROBLEM SOLVED!
There is Auto Formatting or AutoText in Wordpress that was automatically adding <br /> to the end of my image hyperlinks.
Added .photographs br {display: none;} to the CSS, and it works a treat.

Strange artefact appearing in my HTML in Chrome/Webkit (with screenshots and live example)

I'm a bit puzzled by this strange artefact being left in my HTML - here's a very zoomed-in screenshot:
I circled it in red - it's this strange small line. But I cannot track down where on earth it's coming from.
I have a section of the code on JSFiddle to reproduce the bug - can anyone work out where it's coming from and how I can get rid of it? Here's the code on JSFiddle: http://jsfiddle.net/xfmV9/
I'm using Google Chrome Dev, but the problem doesn't seem to appear in Firefox...
Thanks!
Could it be an underline from a space within your anchor tag? Try stripping the white space (newline and spaces) within your anchor tag.
As in this new Fiddle - http://jsfiddle.net/g2G7P/
it's just an space inside your <a> after the <img>
check this http://jsfiddle.net/xfmV9/2/

CSS Showing small box in page

In my question form page, small boxes are display , i dont know what is that ,
how it is displaying ,
I i remve the form tag, that that stupid small box are vanished,
Can u tell me , y small box are displaying.,
Thanks
link text
alt text http://img696.imageshack.us/img696/7421/questionformprobl.jpg
in which browser do you see these 'small boxes'?
In IE6 en IE7 it looks fine.
regard,
Stijn
If you are referring to the slightly irregular white space in your bottom image:
alt text http://qa.ukatn.com/totallydriven/images/lonsky.gif
those are in the image, they don't come from CSS.
I can't see anything else wrong with the page (Firefox 3.6, IE8, Windows 7).