Log in

View Full Version : layout issue after installing slideshow



theremotedr
11-26-2016, 06:46 PM
Hi,
I have installed an image slideshow which works ok but i have a slight layout issue.

Here is a link for the page i am trying to match in respect of layout.
http://theremotedoctor.co.uk/civic.html?scrollto=content

Here is a link for the page with the issue.
http://theremotedoctor.co.uk/profile_slideshow.html?scrollto=content

The correct page has a static image within the black border.
You will also see a small space between the bottom of this border & the start of the black border below it.

The page with the slide show does not have the images nicely fit inside the black border.
Slight gap at the top but also at the bottom.
You will notice that the bottom black border is sat on top of the black border below it.

Using chrome f12 button i see section#content 780x586 but on the other i see section#content 780x592 but cant put my finger on whats changing it.

mlegg
11-26-2016, 08:12 PM
you are still not checking your code for errors! You have 20 errors. https://validator.w3.org/nu/?doc=http%3A%2F%2Ftheremotedoctor.co.uk%2Fprofile_slideshow.html%3Fscrollto%3Dcontent

theremotedr
11-26-2016, 08:43 PM
Some items were advised from this forum.
Also some are minor which isn't the cause of this issue.

Because these are old it will take longer to research them and change as opposed to looking for the issue itself I'm trying to sort.
I would assume every web page would flag something up as incorrect ?

mlegg
11-26-2016, 11:47 PM
Yes, every page with bad html ,css, etc will cause problems.

I forgot to post this earlier too. http://www.theremotedoctor.co.uk and http://theremotedoctor.co.uk/ should resolve to the same URL, but currently do not.
In order to pass this test you must consider using a 301 re-write rule in your .htaccess file so that both addresses (http://example.com and http://www.example.com) resolve to the same URL.
- If you want to redirect http://www.example.com to http://example.com, you can use this:


RewriteCond %{HTTP_HOST} ^www\.example\.com$
RewriteRule ^/?$ "http\:\/\/example\.com\/" [R=301,L]

- If you want to redirect http://example.com to http://www.example.com, you can use this:


RewriteCond %{HTTP_HOST} !^www.example.com$ [NC]
RewriteRule ^(.*)$ http://www.example.com/$1 [L,R=301]

Note that you must put the above lines somewhere after RewriteEngine On line.

theremotedr
11-27-2016, 12:06 AM
Why is there 2 different urls shown ?

mlegg
11-27-2016, 01:13 AM
somebody may type http or www at the beginning on the address bar to find your site.

theremotedr
11-27-2016, 01:26 AM
Ok got you.
Is this something I've done wrong somewhere ?

theremotedr
11-27-2016, 10:36 AM
Morning,
I have done as advised above.
In my .htaccess file there was not RewriteEngine On line
I simply added it with the code advised but get a 403 Forbidden message now.


## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>
## EXPIRES CACHING ##
<Files ~ "^\.(htaccess|htpasswd)$">
deny from all
</Files>
Options Indexes
order deny,allow
<IfModule mod_headers.c>
<FilesMatch "\.(js|css|xml|gz)$">
Header append Vary: Accept-Encoding
</FilesMatch>
</IfModule>
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddType application/x-httpd-php .htm .html
AddType video/ogg .ogv
AddType video/mp4 .mp4
RewriteEngine On
RewriteCond %{HTTP_HOST} ^www\.theremotedoctor\.co.uk$
RewriteRule ^/?$ "http\:\/\/theremotedoctor\.co.uk\/" [R=301,L]

I have put this here to show you but will look again now at it.

coothead
11-27-2016, 01:09 PM
Hi there theremotedr,


your image problem can be resolved with this...



#slidedom img{
display:block;
}



coothead

theremotedr
11-27-2016, 01:23 PM
Hi,
Where would that code need to be placed.

Thanks

coothead
11-27-2016, 01:44 PM
Hi there theremotedr,


put it in, what you consider to be, the appropriate CSS file - "basic-style.css", perhaps. ;)


coothead

theremotedr
11-27-2016, 02:16 PM
Ha Ha,
It put it in the Body of the Basic css file but no change was seen.
I refreshed F5 but still the same.
Some 20 minutes later i now see the change

Can you shed any light on this 301 re-write mlegg mentioned.

styxlawyer
11-27-2016, 03:02 PM
It should be placed either in the HEAD section of the appropriate web page or in your main CSS file. Incidentally you should also move your other "<style> ... </style>" block from the "<body> ... </body>" section into the "<head> ... </head>" section of ALL the pages.